Question

我正在使用this solution以内联方式在我的页面上放置“like”按钮。基本上，按钮放在li内的ul元素内。到目前为止，这是有效的。

按钮位于我页面的页脚中。问题是，当我希望它们居中时，它们与页面左侧对齐。我已经尝试了所有我能想到的东西，但似乎无法将它们水平居中。

我已经设置了一个JSFiddle here。（你会注意到Bootstrap是一个依赖。我的网站使用它，所以你的答案可以在必要时利用它，但不是必须的。）

感谢。

Answer 1

一些事情;你为什么要把ul漂浮？无论你做什么，这都迫使该元素向左移动。如果你将宽度设置为ul，我测试350px，然后左右边距为自动，你应该很好并且居中。您还需要在ul中添加'clearfix'div，以便版权保留在底部。请参阅下面的代码：

HTML示例：

<ul>
    <li>.....<li>
    <li>.....</li>
    etc....
    <div class="clearfix"></div>
</ul>

CSS（你的更正）：

ul.like-buttons{
list-style: none;
margin: 5px auto 20px auto;
padding: 0;
width: 350px;
}

CSS Clearfix：

.clearfix {
    clear:both;
}

所以，我所做的就是摆脱ul上的浮动，定义ul的宽度，然后将左边和右边的自动边距设置为居中，然后使用clearfix使ul具有一个受尊重的垂直高度。 / p>

Answer 2

通过将ul包装在容器div中，可以使用margin：0 auto;特技。

一种方法：

Answer 3

摆脱浮动并将LI的显示属性更改为'inline-block'就可以了。

此外，需要对Facebook iframe内联样式进行小幅修改以调整高度，以便一切都内联。