这是 HTML:
<nav>
<ul class="menu">
<li class="li_pc"><a href="#">PC</a></li>
<li class="li_one"><a href="#">ONE</a></li>
<li class="li_ps3"><a href="#">PS4</a></li>
<li class="li_360"><a href="#">360</a></li>
<li class="li_ps3"><a href="#">PS3</a></li>
<li class="li_wiiu"><a href="#">WiiU</a></li>
</ul>
</nav>
这是 CSS :
nav {
padding: 0;
margin: 0;
widht: 1200px;
height: 100px;
}
ul li {
display: inline;
font-family: Verdana, Geneva, sans-serif;
float: left; /* IE */
list-style-type: none;
}
ul li a {
display: block;
float: left;
width: 190px;
height: 60px;
padding: 0;
background-color: transparent;
color: white;
text-decoration: none;
text-align: center;
}
.li_pc a:hover {
background-color: #cc9a34;
}
.li_one a:hover {
background-color: #149a14;
}
.li_ps4 a:hover {
background-color: #040264;
}
.li_360 a:hover {
background-color: #9cce04;
}
.li_ps3 a:hover {
background-color: #0406b4;
}
.li_wiiu a:hover {
background-color: #5c12ac;
}
我的目标是使单元格中的文本垂直居中。我正在使用 text-align:center;水平居中,但是当我使用 vertical-align:middle;它甚至不会移动一个像素。我尝试了很多不同的方法,但它总是会破坏事物并使设计看起来像我在星期天早上的脸。
请问我怎样才能使它们垂直居中?
提前致谢:)
最佳答案
关于css - 如何在菜单中垂直居中链接?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19316660/