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

【问题标题】：How to center Facebook/G+/Twitter "like" buttons on page?如何在页面上居中 Facebook/G+/Twitter“喜欢”按钮？
【发布时间】：2012-10-08 01:45:42
【问题描述】：

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

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

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

谢谢。

【问题讨论】：

【解决方案1】：

几样东西；为什么你的 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 具有受尊重的垂直高度。

【讨论】：

【解决方案2】：

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

一种方法：

【讨论】：

【解决方案3】：

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

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

【讨论】：