CSS：对齐浮动的li在div中居中？

Question

HTML

<div class="wrapper join-links">
    <ul>
       <li><a href="link">Whatever</a></li>
       <li><a href="link">Something</a></li>
    </ul>
</div>​

CSS

.join-links li {
    float:left;
    margin-right:20px;
}​

是否有可能将两个链接“居中”或“对齐”对齐在周围的包装div中？

http://jsfiddle.net/CRrmL/

编辑：我也想知道我是否可以正确对齐它们？

Answer 1

将float: left更改为display: inline，以便：

.join-links li {
    display: inline;
    margin-right:20px;
}​

然后，您可以在父div上使用text-align。

Example centre align
Example right align

Answer 2

你可以通过公共边缘黑客来实现这一目标：

.join-links ul{
    margin:0 auto;
}

然后您需要设置要在行中显示的li元素：

.join-links li {
    display:inline;
}​

Answer 3

要将alinks对齐到右侧或中心，您需要使用文本对齐并显示内联或内联块到li元素。 Float属性将任何元素转换为块。 http://jsfiddle.net/CRrmL/15/ http://jsfiddle.net/CRrmL/16/

Answer 4

您可以使链接合理化。只需为li定义一个类，然后先将li浮动到左侧，将第二个li浮动到右侧。

Check this example