Question

我在尝试将导航文字放在我的页面上时遇到了困难。即使我重新调整窗口大小，我希望我的所有链接始终位于页面的中心。谢谢你的时间。

HTML：

<div id="navcont">
     <div id="navigation">
        <ul>
            <li class="home"><a href="#home">Home</a></li>
            <li class="about"><a href="#about">About me</a></li>
            <li class="portfolio"><a href="#portfolio">Portfolio</a></li>
            <li class="contact"><a href="#talktome">Talk to me</a></li>
        </ul>
</div>
</div>

CSS：

#navcont{
    height: 80px;
    background-color: #ebebeb;
    width: 100%;
    padding-top: 10px;
}
#navigation{
    font-size: 15px;
    font-family: "TYPOGRAPH PRO" arial;
}
#navigation ul li{
    list-style:none;
    display:inline-block;
    background-color:red;
    width:120px;
}
#navigation ul li a{
    text-transform:uppercase;
    text-decoration:none;
    color:black;
}
#navigation ul li a:hover{
    color:#217c7e;
}

Answer 1

您想要使用

text-align:center;

这个例子。但是如果你把它变得更复杂，你可能想看看父div上的margin:0 auto;。另外值得注意的是，为了让它实际看起来居中，您需要调整自动应用于UL和LI的边距

JS小提琴：http://jsfiddle.net/W4eF3/

Answer 2

您应该只需将text-align: center添加到ul。

#navigation ul{
    text-align: center;
}

这将使所有li元素及其中的文本居中。如果您不希望文本居中，则可以向text-align: left元素添加li。

http://jsfiddle.net/ctCKg/

编辑：但正如其他人所说，这应该是一个简单的搜索或试错。有很多方法可以做到。

Answer 3

将一个属性添加到您的div CSS我的朋友

 #navigation {
   font-size: 15px;
    font-family: "TYPOGRAPH PRO" arial;
   text-align:center;
 }

像这样

div中的中心文本

3 个答案: