以该示例为起点，我试图创建一个导航栏，该导航栏的截面左对齐，右对齐，以确保其中所有元素的垂直对齐到中间。
不幸的是，即使right-aligned和left-aligned类都vertical-align: middle设置了属性，右边的部分也没有垂直居中。我缺少什么？这是代码串：
header img {
display: inline-block;
}
header nav {
display: inline-block;
font-size: 1em;
vertical-align: middle;
}
header nav ul {
padding: 0;
margin: 0;
}
header nav ul img {
vertical-align: middle;
}
header nav li {
display: inline-block;
}
header nav li a {
display: inline-block;
padding: .4em .8em;
font-size: 1em;
text-decoration: none;
color: black;
background: #eee;
line-height: 1;
}
header .container {
max-width: 800px;
margin: auto;
overflow: hidden;
}
.left-aligned {
float: left;
}
.right-aligned {
float: right;
}<html>
<body>
<header role="banner">
<div class="container">
<div class="left-aligned">
<img class="left" src="http://placehold.it/200x200">
</div>
<div class="right-aligned">
<nav id="navigation" role="navigation">
<ul>
<li>
<img src="http://placehold.it/100x100">
<a href="#" title="About Us">About Us</a>
</li>
<li><a href="#" title="Biographies">Biographies</a></li>
<li><a href="#" title="Services">Services</a></li>
<li><a href="#" title="Careers">Careers</a></li>
<li><a href="#" title="Contact">Contact</a></li>
</ul>
</nav>
</div>
</div>
</header>
</body>
</html>对于flexbox来说，这是一个很好的用例-通过在容器类中添加以下三行，可以实现左右对齐的部分：
display: flex;
justify-content: space-between;
align-items: center;
因此，您的最终代码将如下所示（为了清晰起见，我将HTML和CSS分开了）：
header img {
display: inline-block;
}
header nav {
display: inline-block;
font-size: 1em;
}
header nav ul {
padding: 0;
margin: 0;
}
header nav ul img {
vertical-align: middle;
}
header nav li {
display: inline-block;
}
header nav li a {
display: inline-block;
padding: .4em .8em;
font-size: 1em;
text-decoration: none;
color: black;
background: #eee;
line-height: 1;
}
header .container {
max-width: 800px;
margin: auto;
overflow: hidden;
display: flex;
justify-content: space-between;
align-items: center;
}<header role="banner">
<div class="container">
<div class="left-aligned">
<img class="left" src="http://placehold.it/200x200">
</div>
<div class="right-aligned">
<nav id="navigation" role="navigation">
<ul>
<li>
<img src="http://placehold.it/100x100">
<a href="#" title="About Us">About Us</a>
</li>
<li><a href="#" title="Biographies">Biographies</a></li>
<li><a href="#" title="Services">Services</a></li>
<li><a href="#" title="Careers">Careers</a></li>
<li><a href="#" title="Contact">Contact</a></li>
</ul>
</nav>
</div>
</div>
</header>这证明了flexbox的直接子级可以左右对齐，并在其之间留有空间。如果存在两个以上的元素，则将在容器的整个宽度上以相等的间距放置它们。
对齐项目将确定弹性框内元素的垂直对齐。
如果flex-direction未设置（默认值-row），则为true 。当flex-direction设置为column时，对齐和对齐影响的“轴”反转。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句