我正在尝试将我的导航居中。 CSS text-align: center;不管用。它似乎不会以任何方式、形状或形式影响导航。
这是我的 html:
<nav id="user_nav"><ul>
<li><a href="#">Friends</a></li>
<li><a href="#">Followers</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Interests</a></li>
</ul></nav>
这是我的 CSS:
#user_nav {
height: 60px;
border-bottom: 1px solid black;
width: 100%;
}
#user_nav ul {
margin: 0 auto;
width: 100%;
}
#user_nav ul li {
list-style: none;
display: inline;
text-align: center;
}
#user_nav ul li a {
padding: 15px 25px 0 0;
font-size: 18px;
float: left;
}
请注意:我正在尝试使链接水平和垂直居中。
如果有比我现在做的更好的方法,我愿意接受建议。
请帮帮我。
最佳答案
CSS
#user_nav {
height: 60px;
border-bottom: 1px solid black;
width: 100%;
}
#user_nav ul {
margin: 0 auto;
width: 100%;
text-align: center;
}
#user_nav ul li {
list-style: none;
display: inline-block;
}
#user_nav ul li a {
vertical-align: middle;
padding: 15px 25px 0 0;
font-size: 18px;
display: block;
}
HTML
<nav id="user_nav"><ul>
<li><a href="#">Friends</a></li>
<li><a href="#">Followers</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Interests</a></li>
</ul></nav>
关于html - 文本对齐:中心在我的导航中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21421908/