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

在定义.welcome的全局样式之前，您正在定义li。这意味着.top_menu ul li中的任何样式都将覆盖.welcome中的样式（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; }

<强>更新

通过绝对定位外部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保留为浮点数，然后将中心元素放置为：

.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而使内容居中，因此这不应该是问题

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

2 个答案: