html-垂直对齐列表中的所有元素

概述我有一个使用Ul和Li元素的导航栏.除了垂直因素,我还按自己的方式设计了所有样式.我希望所有元素都垂直居中,但不起作用.我试过使用vertical-align：middle;在元素上,但它什么也没做.这是我的代码.nav { background-color: #4D0066; width: 400px; height: 60px; bord

我有一个使用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" ></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" ></a></li>    <li><a href="#">Arena</a></li>    <li><a href="#">Leagues</a></li>  </ul></nav>

总结

以上是内存溢出为你收集整理的html-垂直对齐列表中的所有元素 全部内容，希望文章能够帮你解决html-垂直对齐列表中的所有元素 所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。