如何水平对齐社交分享按钮？答案

【问题标题】：How to horizontal align social share buttons?如何水平对齐社交分享按钮？
【发布时间】：2012-04-01 03:14:56
【问题描述】：

我见过几个网站，这些social share buttons 看起来完全水平对齐。考虑到其中许多按钮都是 iframe。
这是我目前痛苦的情况：

【问题讨论】：

HTML 和 CSS 将大大帮助您。仅凭一张图片几乎不可能弄清楚。
屏幕截图仅在有相关代码时才有帮助。
当然这必须用 css 完成（这就是为什么我用css 和style 标记）！我要求考虑到类似情况的一般提示。这是designers 不仅仅是程序员的问题。
在这种情况下，我们可以很容易地为您提供帮助，但至少提供代码/小提琴，以便我们可以看到问题出在哪里，因为所有代码都在 iframe 中，而且 css 也不同，但根据我们需要调整css。
@IgorParra，我想说任务不是针对设计师，而是针对编码人员，因为对齐页面上的元素是一项 CSS 工作，而不是 Photoshop、corel...

【解决方案1】：

将 iframe 上的 margin-top（或其上方的 div 元素）更改为负值，以使它们对齐。一旦你确定了正确的元素，就使用试错法，直到你做对为止，例如使用以下 HTML：

<div id="twitter">
  <iframe/>
</div>
<div id="facebook">
  <iframe/>
</div>
<div id="digg">
  <iframe/>
</div>

CSS 看起来像这样：

div#facebook 
{
  margin-top:-5px;
}
div#digg 
{
  margin-top:-10px;
}

【讨论】：