Question

我一直在尝试将两个里面的ul放在中心位置。但是我无法让它发挥作用。这是我的HTML：

<ul id="ul-home">           
        <li id="li-home">
            <a id="a-home" href="search.php">Click here to search for a free computer room</a>
        </li>   
        <li id="li-home">
            <a id="a-home" href="my_bookings.php">Click here to search through your bookings</a>
        </li>   
</ul>

这是我的CSS：

#ul-home
{
  margin-left:auto;
  margin-right:auto;
  width:70%;
  text-align:center;
}

#li-home
{
  display: inline;
}

#a-home:link, #a-home:visited
{
      color:#FFF;
      background-color:#F0984A;
      padding:20px;
      text-decoration:none;
      font-weight:bold;
}

#a-home:hover, #a-home:active
{
  background-color:#D6721A;
}

#a-home
{
  width:200px;
  display:inline-block;
}

这两个链接位于中心左侧，大约200px。出了什么问题？

Answer 1

您的ul比彩色区域宽，中间位置与孩子对齐左侧...这给人的印象是ul不在中间=＆gt; see this here

要解决：

任一将text-align:center;添加到#ul-home =＆gt; solution

或

减少ul宽度 =＆gt; solution （不推荐）

修改

您padding-right:20px;设置为#li-home这将始终将内容推送到左边=＆gt; see here

删除它，你处于完美的中心=＆gt; see here

Answer 2

你的＃ul-home需要css指令

padding-left: 0;

在这里摆弄：http://jsfiddle.net/h7X7S/2/

Answer 3

将text-align: center添加到#ul-home。 Example

Answer 4

将text-align:center添加到ul，您也可以从ul中删除默认填充 Fiddle

Answer 5

到UL的父div尝试添加text-align:center

并且UL尝试添加display:inline-block

中心无序列表（CSS）

5 个答案: