html - 如何在页面上居中 Facebook/G+/Twitter“喜欢”按钮？

Question

我正在使用此解决方案以内联方式在我的页面上放置“喜欢”按钮。基本上，按钮放置在lia 内的元素内ul。到目前为止，这行得通。

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

我在这里设置了一个 JSFiddle 。（您会注意到 Bootstrap 是一个依赖项。我的网站使用它，因此您的答案可以在必要时利用它，但不是必须的。）

谢谢。

score 3 · Accepted Answer

几件事；为什么你的 ul 向左浮动？无论您做什么，这都会迫使该元素向左移动。如果你给ul设置了一个宽度，我测试了350px，然后左右边距设置为auto，你应该很好，居中。您还需要向 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 {
    clear:both;
}

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

score 1 · Accepted Answer

通过将你的 ul 包装在一个容器 div 中，它可以使用 margin:0 auto; 居中。诡计。

一种方法：

score 0 · Accepted Answer

摆脱浮动并将 LI 的显示属性更改为“内联块”就可以了。

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

3 回答 3