Question

我正在尝试发布this site 我该如何处理expected `short_link.view_count` to have changed by 1, but was changed by 0的垂直对齐？

div

.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进行垂直对齐，但这没有用。

Answer 1

.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

如何处理div的垂直对齐？

1 个答案: