Html Facebook 和 Twitter 按钮未对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4770372/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Misalignment of Facebook & Twitter buttons
提问by Roman Cheplyaka
The page contains two buttons, from twitter and from facebook.
该页面包含两个按钮，分别来自 twitter 和来自 facebook。
What I'm observing in Firefox 3.5.15 is:
我在 Firefox 3.5.15 中观察到的是：
- While the page is loading, the buttons are more or less aligned (I mean their bottom sides)
- When the page is loaded, the facebook button moves a few pixels down, so that it's bottom side is lower than the bottom side of the twitter button.
- If I reload the page, the buttons are again aligned, and remain in this state even after the page is loaded.
- 当页面加载时，按钮或多或少对齐（我的意思是它们的底部）
- 当页面加载时，facebook 按钮向下移动几个像素，因此它的底部低于 twitter 按钮的底部。
- 如果我重新加载页面，按钮将再次对齐，并且即使在页面加载后仍保持此状态。
Can someone please explain what's going on and how to fix it?
有人可以解释发生了什么以及如何解决吗？
回答by vandre
I fixed this by adding vertical-align:top (This is when using their new HTML5 markup). My facebook button code now looks like:
我通过添加 vertical-align:top 解决了这个问题（这是使用他们新的 HTML5 标记时）。我的 facebook 按钮代码现在看起来像：
<script>(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
<div class="fb-like" data-send="false" data-layout="button_count" data-width="100" data- show-faces="false" style="vertical-align:top;zoom:1;*display:inline"> </div>
I also had to add zoom:1 and *display:inline IE7 hack so that buttons show side by side
我还必须添加 zoom:1 和 *display:inline IE7 hack，以便按钮并排显示
回答by Guemundur Tór Magnússon
Found the style that is pushing it down ..
找到了推动它的风格..
If you use FireBug and scroll down to the iframe within the FB button.
如果您使用 FireBug 并向下滚动到 FB 按钮内的 iframe。
This CSS style
这种 CSS 样式
.fb_iframe_widget iframe
has this element
有这个元素
vertical-align: text-bottom;
That's the one who's pushing it down.
那就是推倒它的人。
You can override the CSS style with the following combo of selector and !important
您可以使用以下选择器和 !important 组合覆盖 CSS 样式
.twitter-share-button[style] { vertical-align: text-bottom !important; }
回答by Dan dot net
I just enclosed all my icons in a div and then set the line height on that div so that they all lined up (since they are all the same height and some are aligned with the top and some the bottom)
我只是将我的所有图标都包含在一个 div 中，然后在该 div 上设置行高，以便它们全部对齐（因为它们的高度都相同，有些与顶部对齐，有些与底部对齐）
<div class="product-social-links">
<a href="//www.pinterest.com/pin/create/but [...] >
<img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" />
</a>
<div class="fb-like" data-href="@Request.Url.AbsoluteUri" [...] ></div>
<a href="https://twitter.com/share" class="twitter-share-button" [...] >Tweet</a>
</div>
Then the CSS
然后是 CSS
#product-details-page .product-social-links {
line-height: 10px;
}
回答by Gezim
I fixed this by adding position: relative; top: 4px;to the styleattribute of the facebook iframe.
我通过添加position: relative; top: 4px;到stylefacebook iframe的属性来解决这个问题。
So, it looks like this:
所以，它看起来像这样：
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.example.com&layout=box_count&show_faces=true&width=110&action=recommend&colorscheme=light&height=65" scrolling="no" frameborder="0" style="position: relative; top: 4px; border:none; overflow:hidden; width:110px; height:65px;" allowTransparency="true"></iframe>
An imperfect solution, but it works.
一个不完美的解决方案，但它有效。
回答by StevenClontz
It seems that, as of today at least, that the issue comes from an odd alignment of the <span>tag that the javascript generates within the .fb-share-button <div>. Here's my fix:
似乎，至少在今天，问题来自<span>javascript 在.fb-share-button <div>. 这是我的修复：
.fb-share-button span {
top: -6px;
}
回答by Digital Robot Gorilla
I realise that this questions was posted some time ago, but here is the solution that I use.
我意识到这个问题是前一段时间发布的，但这是我使用的解决方案。
.twitter-share-button {
position:relative;
top:6px;
}
回答by Amit
You can easily solve this issue with CSS:
您可以使用 CSS 轻松解决此问题：
iframe { float: left; padding-right: 10px; }
iframe { float: left; padding-right: 10px; }
EIDT: If you want them to be centered, simply wrap them in a div (which they already are wrapped with, give that div a class or an ID. For example, let's give it a class of twfbfor twitter/facebook. Now in the CSS we'll declare a width and automatic margins as so:
EIDT：如果你想让它们居中，只需将它们包装在一个 div 中（它们已经被包装了，给那个 div 一个类或一个 ID。例如，让我们给它一个twfbtwitter/facebook 的类。现在在CSS 我们将声明宽度和自动边距，如下所示：
.twfb { width: 120px; margin: 0 auto; }
.twfb { width: 120px; margin: 0 auto; }
EDIT 2: To remove the large margin from the facebook, simply add this to your CSS:
编辑 2：要从 facebook 中删除大边距，只需将其添加到您的 CSS 中：
.fb_edge_widget_with_comment { margin-left: -26ppx; }
.fb_edge_widget_with_comment { margin-left: -26ppx; }
That should align them nice and close to each other.
这应该使它们很好地对齐并且彼此靠近。
That should do it!
应该这样做！
Good luck
祝你好运
回答by andres.arslanian
This worked for me as a charm:
这对我来说很有魅力：
.twitter-share-button[style] { vertical-align: middle !important; }
回答by Raymond Ma
.fb_iframe_widget {
span {
vertical-align: initial !important;
}
}
worked for me
为我工作
回答by DMTintner
The problem here is not the position, height or any other CSS, but rather the inline-block elements taking the wrong vertical alignment. The facebook element is vertial-align: top and the twitter element is vertical-align: bottom. Can all be fixed with just one line of CSS, but have to use the correct selector and !importantoverride JS applied inline styles.
这里的问题不是位置、高度或任何其他 CSS，而是内联块元素采用错误的垂直对齐方式。facebook 元素是vertial-align:top，而twitter 元素是vertial-align:bottom。都可以用一行 CSS 修复，但必须使用正确的选择器和 !importantoverride JS 应用的内联样式。
iframe[style] { /* to select the outer-most element of the twitter button */
display: inline-block;
vertical-align: bottom !important;
}
