html - 如何处理“div”的垂直对齐?
问题描述
我正在练习发布这个网站
如何处理垂直对齐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
绿色空间在蓝色背景中垂直对齐,导航栏除外。我该如何处理?我搜索了解决方案并尝试了很多东西,但我失败了。许多解决方案建议display: table-cell
垂直对齐,但没有奏效。
解决方案
.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
推荐阅读
- reactjs - 如何确保在组件安装之前我有数据?
- bash - 为什么 bash eval 在状态 > 0 的命令退出时返回 0?
- javascript - 反应路由器导航链接不更新路由更改
- javascript - 如何更改外部加载的 bings 地图的图钉颜色?
- javascript - 对象数组到以属性为键的对象
- sql - 使用表值函数捕获所有查询
- git - 由于错误排序的参数和丢失的未跟踪文件,git stash 部分失败
- uipath - uipath错误单击onbeforeunload弹出窗口在chrome中不起作用
- html - 当链接文本跨越多行时,最小化链接行之间的空间
- android - 您可以解压缩已签名的 APK 吗?