text-align:center不起作用

时间:2012-01-14 14:04:30

标签: html css text-alignment

由于一些奇怪的原因,我的text-align: center;无效。这很奇怪'因为它是HTML和开发人员最基本的事情,所以我有点尴尬......我必须做一些可怕的错误并且不要看到我的错误。 text-align选项甚至没有显示在Firebug中。

有人可以帮助我吗?

HTML:

<div id="main-menu">
    <ul id="main-menu-links" class="links clearfix">
       <li class="menu-286 first active">
          <a class="active" title="" href="/dashboard">Dashboard</a>
       </li>
       <li class="menu-194">
         <a href="Organisation">Organisation</a>
       </li>
    </ul>
</div>

CSS:(我已尝试在每个选择器中放置text-align: center,但没有结果......)

div#main-menu {
    background-color: #c4d82d;
    border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
}

div#main-menu ul {
    padding: 0px;
}

div#main-menu li{
    border-right: 1px solid #86a43f;
    width: 186px;
}

div#main-menu li.last{
    border: none;
}

div#main-menu a, div#main-menu a.active {
    background: none;
    text-shadow: none;
}

div#main-menu a:hover {
    background: none;
    font-style: italic;
}

3 个答案:

答案 0 :(得分:3)

当我将<ul>...</ul>元素包装在<div id="main-menu">中时,它按预期工作: http://jsfiddle.net/6bBK5/

确保使用正确的选择器。 ID区分大小写,选择器中的空格很重要。

答案 1 :(得分:1)

<div>
    <span>
        <ul>
              <li>Here is the centered Title!</li>
        </ul>
    </span>
</div>

CSS

ul {text-align: center;}
li {display:inline; padding:0 10px 0 0}

答案 2 :(得分:0)

所以,正在努力:

div#main-menu li{
    border-right: 1px solid #86a43f;
    width: 186px;
    text-align:center;
}