我需要将文本居中在div中,但我不知道如何。如果有人可以帮助我,那将是绝对精彩的。
CSS
#nav {
width: 425px;
height: 50px;
margin: 0 auto;
color: white;
font-size: 25px;
font-family: Mager;
}
#nav li {
list-style: none;
float: left;
}
#nav li:hover {
opacity: .6;
}
HTML
<div id="nav">
<ul>
<li>Home</li>
<li> </li>
<li>Soundcloud</li>
<li> </li>
<li>Facebook</li>
<li> </li>
<li>Contact</li>
</ul>
答案 0 :(得分:0)
使用text-align
属性:
#nav li {
list-style: none;
float: left;
text-align:center;
}
但请注意您使用的是float:left
,因此除非您设置宽度,否则您实际上看不到任何居中。
答案 1 :(得分:0)
我有点小提琴你可以看到...... http://jsfiddle.net/Azzamean/fjnuw/67/
HTML:
<div id="menu">
<header>
<ul>
<li><a href="#">Home</a>
</li>
<li><a href="#">Sound Cloud</a>
</li>
<li><a href="#">Facebook</a>
</li>
<li><a href="#">Contact</a>
</li>
</ul>
</header>
</div>
CSS:
ul {
list-style-type: none;
padding: 0;
overflow:hidden;
}
a:link, a:visited {
margin:0 auto;
display:block;
width: 120px;
font-weight:bold;
color:#FFFFFF;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover, a:active {
background-color:#FFFFFF;
color:#E80000;
}
li {
display:inline-block;
}
#menu {
background-color:#E80000;
text-align:center;
}