我有一个使用Ul和Li元素的导航栏.除了垂直因素,我还按自己的方式设计了所有样式.我希望所有元素都垂直居中,但不起作用.我试过使用vertical-align：middle;在元素上,但它什么也没做.
这是我的代码.
nav {
background-color: #4D0066;
width: 400px;
height: 60px;
border: 3px solid black;
border-radius: 5px 5px 35px 35px;
;
margin: 5px auto;
}
ul {
font-size: 0;
text-align: center;
}
li,li a:after {
display: inline-block;
vertical-align: middle;
}
li a:after {
content:'';
height: 100%;
}
a {
color: white;
text-decoration: none;
font-size: 15pt;
display: block;
padding: 0 10px;
}
.home {
width: 32px;
display: block;
vertical-align: middle;
}<nav>
<ul>
<li><a href="#">Roster</a></li>
<li><a href="#">News</a></li>
<li>
<a href="#"><img src="images/home.png" class="home"></a>
</li>
<li><a href="#">Arena</a></li>
<li><a href="#">Leagues</a></li>
</ul>
</nav>最佳答案
使ul中的li项对齐.您应该将ul的显示设置为flex,并应用align-items：center或align-items：baseline.居中将使它们垂直居中,基线将使它们彼此对齐.
将高度设置为100％还将确保它占用了提供的整个空间.
有关flexBox的更多信息,请参见：https://css-tricks.com/snippets/css/a-guide-to-flexbox/
nav {
background-color: #4D0066;
width: 400px;
height: 60px;
border: 3px solid black;
border-radius: 5px 5px 35px 35px;;
margin: 5px auto;
}
ul {
font-size: 0;
text-align: center;
display:flex;
align-items: center;
height: 100%;
}
li {
display: inline-block;
}
a {
color: white;
text-decoration: none;
font-size: 15pt;
display: block;
padding: 0 10px;
}
.home {
width: 32px;
display: block;
vertical-align: middle;
}<nav>
<ul>
<li><a href="#">Roster</a></li>
<li><a href="#">News</a></li>
<li><a href="#"><img src="images/home.png" class="home"></a></li>
<li><a href="#">Arena</a></li>
<li><a href="#">Leagues</a></li>
</ul>
</nav>