将特定的内联li对齐到ul的中心

Question

我有这个HTML结构

<div class="top_menu">
    <ul>
        <li class="left"><a href="" class="family-filter">asdas</a></li>
        <li class="welcome">Welcome <span class="username">Guest</span></li>
        <li class="right"><a href="#">Login</a></li>
    </ul>
</div>

这个css代码：

.top_menu { 
  padding: 20px; background-color: #fff;
  -webkit-border-bottom-right-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-radius-bottomright: 5px;
  -moz-border-radius-bottomleft: 5px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}
.top_menu ul { margin: 0; padding: 0; line-height: 0; }
.top_menu ul li { display: inline; margin: 0; padding: 0; border: 1px solid red; }
.top_menu ul .welcome { text-align:center; }
.top_menu ul li a { font-size: 14px; }

我想对齐.welcome到中间.top_menu > ul 。 我已经尝试了以上和这个：

.center { margin-left: auto; margin-right: auto; display: block; clear: both; }

但没有成功，任何想法？ http://jsfiddle.net/U2mfK/

Answer 1

text-align: center; 需要设置为父级。 因此，从移动.welcome到.top_menu ul :)

Answer 2

在定义li的全局样式之前，您正在定义.welcome 。 这将意味着.top_menu ul li中的任何样式都将覆盖.top_menu ul li （display：block;）中的样式。 把它放在下面这样：

.top_menu ul { margin: 0; padding: 0; line-height: 0; }
.top_menu ul li { display: inline; margin: 0; padding: 0; border: 1px solid red; }
.top_menu ul .welcome { text-align:center; display: block; margin: 0 auto; }
.top_menu ul li a { font-size: 14px; }

UPDATE

通过绝对定位外部li标签，您可以防止它们将中心li推离中心。

像这样（为了清晰起见，我只提供了额外的样式）：

.top_menu ul { position: relative; }
.top_menu ul .left { position: absolute; left: 0; }
.top_menu ul .welcome { text-align:center; display: block; margin: 0 auto; }
.top_menu ul .right { position: absolute; right: 0; }

或者，您可以将.left和.right与它们的浮动一样保留，并且只需将中心元素.right如下：

.top_menu ul { position: relative; }
.top_menu ul .left { float: left; }
.top_menu ul .welcome { text-align:center; display: block; position: absolute; left: 50%; margin-left: -100px; width: 200px; }
.top_menu ul .right { float: right; }

如果使用上述方法，请确保margin-left是宽度的一半。 您必须指定此方法的宽度。 如果你只是把它做得比内容大，那么由于text-align: center ，它会使内容text-align: center所以这应该不是问题