Facebook和Twitter按鈕的未對齊

該頁面包含兩個按鈕，分別來自twitter和facebook。Facebook和Twitter按鈕的未對齊

我正在觀察在Firefox 3.5.15是：

當加載頁面時，按鈕都或多或少對齊（我的意思是他們的下側）
當頁面加載，facebook按鈕向下移動幾個像素，所以它的底部低於twitter按鈕的底部。
如果我重新加載頁面，這些按鈕再次對齊，並且即使在頁面加載後仍保持此狀態。

有人可以請解釋發生了什麼，以及如何解決它？

來源

2011-01-22 Roman Cheplyaka

被發現時其向下推的風格..

如果你使用Firebug和向下滾動到FB按鈕中的iframe。

這個CSS樣式

.fb_iframe_widget iframe

有這個元素

vertical-align: text-bottom;

這是誰在推下來的一個。

您可以選擇下列組合和！重要

.twitter-share-button[style] { vertical-align: text-bottom !important; }

來源

2011-01-24 20:35:30

我不能告訴你那裏發生了什麼事，我甚至不想去想那裏有什麼<fb:headache>，但是你應該能夠通過浮動iframe左側的twitter按鈕並添加一些保證金 - 讓原來的回頭看。

iframe.twitter-share-button { float: left; margin-right: 4px; }

這是一個有點hackish，但應該做的。

UPDATE

.fb_iframe_widget { display: block !important; } 
// leave important away if possible! 

// change main.css/line 41: 
div.text { 
    clear: left; 
    margin: 0 auto; 
    padding: 35pt 5pt 15pt; 
    width: 40em; 
}

來源

2011-01-22 22:25:40 polarblau

感謝您的回答。我希望這些按鈕位於`div`的中心 - 您的解決方案是否可以適應此？ – 2011-01-22 23:02:50

嗯，我想你必須有另一個div包裝按鈕，只是足夠寬，以適應他們兩個，然後使用`邊距：0汽車`中心這個div在它的父div。 – polarblau 2011-01-22 23:14:04

謝謝。這是我玩過浮動後得到的結果： http://ro-che.info/ccc/11.html。仍然不完全是我想要的（按鈕似乎是由它們的上部而不是下部對齊），但是更麻煩我的是facebook按鈕之前的大空間。我如何擺脫它？另外，請你解釋一下（或者指出我的解釋）爲什麼浮動在這裏有幫助嗎？ – 2011-01-23 15:53:20

您可以輕鬆地解決這個問題，與CSS：

iframe { float: left; padding-right: 10px; }

EIDT：如果你希望他們爲中心，簡單地將它們包裝在一個div（其他們已經包裝了，給這個div一個類或一個ID。例如，讓我們給它一類twfb twitter/facebook。現在在CSS中，我們將聲明一個寬度和自動邊距像這樣：

.twfb { width: 120px; margin: 0 auto; }

編輯2：若要從Facebook上刪除大截，只需將它添加到您的CSS：

.fb_edge_widget_with_comment { margin-left: -26ppx; }

這應該對準他們不錯，彼此靠近。

這應該做到這一點！

好運

來源

2011-01-22 22:49:06 Amit

你可以通過添加它的類來更具體的iframe，但我希望你沒有那麼多的iframe ... – Amit 2011-01-22 22:49:41

感謝您的答案。我希望這些按鈕位於`div`的中心 - 您的解決方案是否可以適應此？ – 2011-01-22 23:03:20

當然！我現在編輯我的答案 – Amit 2011-01-23 00:24:33

我加入position: relative; top: 4px; facebook的iframe的style屬性修復了這個覆蓋CSS樣式。

所以，它看起來像這樣：

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.example.com&amp;layout=box_count&amp;show_faces=true&amp;width=110&amp;action=recommend&amp;colorscheme=light&amp;height=65" scrolling="no" frameborder="0" style="position: relative; top: 4px; border:none; overflow:hidden; width:110px; height:65px;" allowTransparency="true"></iframe>

一個不完善的解決方案，但它的工作原理。

來源

2011-02-05 10:32:44 Gezim

我通過添加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>

我也不得不添加縮放：1和*顯示：內聯IE7破解，使按鈕顯示並排

來源

2011-09-12 18:39:59 vandre

我知道這問題被張貼一段時間以前，但這裏是我使用的解決方案。

.twitter-share-button { 
     position:relative; 
     top:6px; 
     }

來源

2012-11-02 10:17:56

這裏的問題不是位置，高度或任何其他CSS，而是內聯塊元素採取錯誤的垂直對齊。 facebook元素是vertial-align：top，twitter元素是vertical-align：bottom。都可以用一行CSS來修復，但必須使用正確的選擇器和！important重疊JS應用的內聯樣式。

iframe[style] { /* to select the outer-most element of the twitter button */ 
    display: inline-block; 
    vertical-align: bottom !important; 
}

來源

2013-02-05 15:44:41 DMTintner

看來，今天至少，這個問題來自於JavaScript的產生.fb-share-button <div>內<span>標籤的奇對齊。這裏是我的解決辦法：

.fb-share-button span { 
    top: -6px; 
}

來源

2013-11-17 03:01:53 StevenClontz

我知道已經有很多答案，但因爲我這個掙扎，沒有在這裏工作對我來說，我想我會加入我的2美分...正如已經提到的， span有一個vertical-align: bottom;，你需要重寫這個。我必須說，即使它與CSS理論背道而馳，如果你能簡單地「關閉」一個像這樣的CSS規則，那真的會很好。我的意思是，FB到底是什麼？一天工作的圖標;但不是下一個。這是我聽過的最愚蠢的事情。

反正...

.fb-like span { 
    /* baseline is default, so it negates bottom*/ 
    vertical-align: baseline !important; 
}

...爲我做。

來源

2014-02-08 05:54:07 nicorellius

我只是圍繞着我的所有圖標在一個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>

然後CSS

#product-details-page .product-social-links { 
    line-height: 10px; 
}

來源

2014-02-20 21:01:55

然後回到這裏的第一個解決方案，一個位。

「top」也可以。

這是我在Joomla插件溶液（見http://www.compago.it/software/41-compago-software/347-facebook-twitter-google1-plugin-for-joomla.html）：

.fb_iframe_widget span { 
vertical-align: top !important; 
}

來源

2014-10-21 22:05:37

.fb_iframe_widget { 
    span { 
    vertical-align: initial !important; 
    } 
}

工作對我來說

來源

2015-09-24 04:42:54

這個工作對我來說是一個魅力：

.twitter-share-button[style] { vertical-align: middle !important; }

來源

2015-10-20 02:13:39

我解決了這個通過採取Guðmundur Þór Magnússon的answer並添加margin-bottom: -2px !important;的CSS規則：

.twitter-share-button[style] { 
    vertical-align: text-bottom !important; 
    margin-bottom: -2px !important; 
}

來源

2015-11-11 19:51:21

使用此代碼這裏使它工作，指的是垂直對齊的部分。相應地更改數（目前爲7）：

<div class="fb-like" data-width="30" data-layout="button" data-action="like" data-show-faces="false" data-share="true" style="vertical-align:7px"></div>

來源

2016-02-25 11:13:57

我所做的只是將CSS添加到我的網頁：

div.fb_iframe_widget > span { 
    vertical-align: unset !important; 
}

這一點比一些問題的答案在這裏少自以爲是和隔離更改爲僅撤銷Facebook共享圖標上的高度調整。

來源

2017-12-10 04:50:00 digitalfoo

Twitter和Facebook按鈕可以垂直固定對準

vertical-align: top !important;

來源

2017-12-20 09:23:19

Facebook和Twitter按鈕的未對齊

回答

相關問題