html - 如何处理 `div` 的垂直对齐？

标签 html css vertical-alignment

我正在练习发布 this site 如何处理 div 的垂直对齐？

JSFIDDLE 

.header {
  background: rgba(0, 0, 0, 0) linear-gradient(135deg, rgb(6, 68, 161) 0%, rgb(56, 205, 255) 100%) repeat scroll 0% 0%;
  height: 668px;
}

.header__nav {
  padding: 20px;
}

.header__nav__logo {
  float: left;
}

.header__nav__logo {
  padding: 6.5px 20px 6.5px 0;
  display: inline-block;
  margin-left: -20px;
}

.header__nav__logo img {
  width: 150px;
  height: 36px;
}

.header__nav__list {
  overflow: hidden;
  float: right;
  margin-right: -20px;
}

.header__nav__list li {
  float: left;
}

.header__nav__list li a {
  padding: 20px;
  display: inline-block;
  color: white;
}

.header__nav__list__button {
  background-color: #eb4336;
  border-radius: 3px;
}

.header__main {
  text-align: center;
  color: white;
  background-color: green;
}

.header__main__title {
  font-size: 50px;
}

.header__main__intro {
  font-size: 20px;
  margin-top: 20px;
  margin-bottom: 10px;
}

.header__main__button {
  background-color: #eb4336;
  border-radius: 5px;
  padding: 15px 50px;
  font-size: 20px;
  margin-top: 20px;
  display: inline-block;
}

.header__main__signin {
  margin-top: 10px;
}

.contents {
  background-color: yellow;
}

.footer {
  background-color: blue;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="default.css">
  <link rel="stylesheet" href="style.css">
  <title>Project Management Software</title>
</head>

<body>
  <header class="header">
    <div class="l__wrapper">
      <div class="header__nav clearfix">
        <a class="header__nav__logo" href="#"><img src="./images/pareto2.png" alt=""></a>
        <ul class="header__nav__list clearfix">
          <li><a href="#">Features</a></li>
          <li><a href="#">Pricing</a></li>
          <li><a href="#">Sign-in</a></li>
          <li><a class="header__nav__list__button" href="#">FREE TRIAL</a></li>
        </ul>
      </div>
      <div class="header__main">
        <h1 class="header__main__title">
          Manage your projects, tasks & team to get things done faster!
        </h1>
        <p class="header__main__intro">
          A simple tool for project management, invoicing & time tracking.
        </p>
        <a class="header__main__button" href="#">TRY IT FREE NOW!</a>
        <p class="header__main__signin">
          Already using Pareto.pm? <span>Sign in</span>
        </p>
      </div>
    </div>
  </header>
  <section class="contents">
    Contents
  </section>
  <footer class="footer">
    Footer
  </footer>
</body>

</html>

我想要绿色空间的 div 在除了导航栏之外的蓝色背景中垂直对齐。我该如何处理？我搜索了解决方案并尝试了很多东西，但我失败了。许多解决方案建议使用 display: table-cell 进行垂直对齐，但它不起作用。

enter image description here

最佳答案 

.l__wrapper {
    display: grid;
    grid-template-columns: auto;
    justify-content: center;
    align-items: center;
    grid-row-gap: 10px;
}

.header {
    background: rgba(0, 0, 0, 0) 
    linear-gradient(135deg, rgb(6, 68, 161) 0%, rgb(56, 205, 255) 100%) 
    repeat scroll 0% 0%;
    height: 668px;
}

.header__nav {
    padding: 20px;
}

.header__nav__logo {
    float: left;
}

.header__nav__logo {
    padding: 6.5px 20px 6.5px 0;
    display: inline-block;
    margin-left: -20px;
}

.header__nav__logo img {
    width: 150px;
    height: 36px;
}

.header__nav__list {
    overflow: hidden;
    float: right;
    margin-right: -20px;
}

.header__nav__list li {
  float: left;
  list-style-type: none;
}

.header__nav__list li a {
    padding: 20px;
    display: inline-block;
    color: white;
}

.header__nav__list__button {
    background-color: #eb4336;
    border-radius: 3px;
}

.header__main {
    text-align: center;
    color: white;
    background-color: green;
}

.header__main__title {
    font-size: 50px;
}

.header__main__intro {
    font-size: 20px;
    margin-top: 20px;
    margin-bottom: 10px;
}

.header__main__button {
    background-color: #eb4336;
    border-radius: 5px;
    padding: 15px 50px;
    font-size: 20px;
    margin-top: 20px;
    display: inline-block;
}

.header__main__signin {
    margin-top: 10px;
}

.contents {
    background-color: yellow;
}

.footer {
    background-color: blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="default.css">
    <link rel="stylesheet" href="style.css">
    <title>Project Management Software</title>
</head>
<body>
    <header class="header">
        <div class="l__wrapper">
            <div class="header__nav clearfix">
                <a class="header__nav__logo" href="#"><img src="./images/pareto2.png" alt=""></a>
                <ul class="header__nav__list clearfix">
                    <li><a href="#">Features</a></li>
                    <li><a href="#">Pricing</a></li>
                    <li><a href="#">Sign-in</a></li>
                    <li><a class="header__nav__list__button" href="#">FREE TRIAL</a></li>
                </ul>
            </div>
            <div class="header__main">
                <h1 class="header__main__title">
                    Manage your projects, tasks & team
                    to get things done faster!
                </h1>
                <p class="header__main__intro">
                    A simple tool for project management, invoicing & time tracking.
                </p>
                <a class="header__main__button" href="#">TRY IT FREE NOW!</a>
                <p class="header__main__signin">
                    Already using Pareto.pm? <span>Sign in</span>
                </p>
            </div>
        </div>
    </header>
    <section class="contents">
        Contents
    </section>
    <footer class="footer">
        Footer
    </footer>
</body>
</html>

对父类使用display: grid，垂直对齐使用align-content: center 作为引用，请访问此链接 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

关于html - 如何处理 `div` 的垂直对齐？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57032857/

上一篇：javascript - 单击下拉菜单时，侧边栏需要变高

下一篇：css - Rvest，html_nodes 返回空列表和字符串，使用网站

相关文章：

javascript - 在引号之间匹配 HTML 打开标签

animation - 背景 css 动画不适用于 firefox

jquery - 无法让 Bootstrap 下拉菜单折叠

html - 垂直对齐应该应用于 child 吗？

CSS 对齐和大小

css - DIV 中的图像(显示 : table-cell;) exceed the height

html - 使用百分比而不是绝对值将绝对 div 在其父项下居中

html - WebSVN 中的 HTML 文件如何呈现？

html - 如何在 div 中居中对齐列表项？

CSS 打印宽度不适用

©2024 IT工具网  联系我们