[英]text-align: center not working in my nav
I am trying to center my navigation. 我正在尝试将导航居中。 The CSS text-align: center;
CSS text-align:center; is not working.
不管用。 It doesn't seem to affect the nav in anyway, shape, or form.
无论如何,它似乎都不会影响导航,形状或形式。
here's my html: 这是我的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>
here's my CSS: 这是我的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;
}
Please note: I am trying to make the links centered horizontally as well as vertically. 请注意:我正在尝试使链接水平居中以及垂直居中。
If there is a better way to do it than how I am doing it now, I am open to suggestions. 如果有比现在更好的方法,我愿意提出建议。
Please help me. 请帮我。
CSS 的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 的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>
You may be interested in this: Live demo (click). 您可能对此感兴趣: 实时演示(单击)。
#user_nav {
height: 60px;
border-bottom: 1px solid black;
width: 100%;
}
#user_nav ul {
width: 100%;
display: table;
}
#user_nav ul li {
list-style: none;
display: table-cell;
font-size: 18px;
}
If you use inline-block
you'll need to space the elements out manually by setting the width: Live demo (click). 如果使用
inline-block
,则需要通过设置宽度来手动间隔元素: 实时演示(单击)。
#user_nav {
height: 60px;
border-bottom: 1px solid black;
width: 100%;
}
#user_nav ul {
width: 100%;
}
#user_nav ul li {
list-style: none;
display: inline-block;
width: 24%;
font-size: 18px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.