SNSボタンを横並びに設置する方法は色々なサイトで紹介されていますが、自分で導入を試してみたときは、ドンピシャで横に並んでくるものがありませんでしたので、色々試してみて下記の設定にたどり着きました。
この方法も今回の自分のケースには有効だったものの、他のケースでは役に立たない可能性もありますが、見てくださる方の参考程度に載せます。
今回はとあるサイトを触らせてもらったときに、SNSボタンをお知らせの各記事の下に中央揃えで並べたかったので、以下のように記述しました。
<div id=”divOutside”>
<div class=”divInSide”>Twitterのボタン</div>
<div class=”divInSide”>Facebookのボタン</div>
</div>
という感じでタグを書いて、CSSは以下の通りです。
#divOutside{
display:table;
margin: 0 auto;
text-align: center;
}
#divOutSide .divInSide{
display:table-cell;
vertical-align:middle;
line-height:0;
}
display:table;
もキモですが、もう１つのポイントは、
line-height:0;
です。
なんかTwitterのボタンは下に余白が出来て、table化してもFacebookのボタンがちょっと下にずれたので、line-heightを1にしたら、だいたい合ってきて、0にしたら並ぶようになりました。
まとめ
もしかしたらSNSボタンの並び順によっても、並ばせる難度が変わってくるのかもしれませんので、上記の方法でうまくいかないこともあること、ご了承ください。
ケースバイケースで、上記方法が誰かのヒントになれば、と思います。
コメント