FacebookのいいねボタンやTwitterのツイートボタンを一列に並べてたいけどズレるとき

公開: 2015-05-14 19:09
更新: 2016-04-29 06:03

どうもみなさんこんにちは。あっきぃことあっきぃです。

友達の数は0人くらい。今年あった人間は身内を抜くと現在3人くらいです。おめでとう。



最近Facebookも廃れた感がすごいです。

昔は仕事のやり取りなんかFacebookでしたけど、
今はチャット系のサービスに以降しつつある感じがムンムンです。



さて、いつの時代からか

Webサイトをつくったらソーシャルボタンを設置しましょう。
設置しなければそれはWebサイトではありませんくらいの勢いでツイートボタンやいいねボタンが普及しました。


さ。そんな感じで設置してみました。

どうでしょう。なんだかずれてますね。

ちなみに今コードはこんな感じです。

<div class="social">
        <a href="https://twitter.com/share" class="twitter-share-button" ...></a><script>...</script>
        <div class="fb-share-button" data-href="http://appstars.jp/" data-type="button_count"></div>
</div>

そんなときは.socialの子要素にvertical-align:bottomを設定してあげます。

.social > * { vertical-align: bottom; }

えいやっ

いい感じです。


ただちょっとボタン同士の距離が近いのでmarginで調節しましょう。

.social > * { vertical-align: bottom; margin: 7px; }

そいやっ

完璧です。



この記事をシェア
この記事にコメントする
書き込む
あっきぃ(@appstars_aki)
Web、iOSなフリーランサーです。好きなものはお寿司です。でもお寿司は高いので普段は雑草とか拾ったドングリを食べています。お仕事や意味もなく毎月お小遣いをくれる人を探してます。

お仕事の依頼や自分で作ったアプリのレビューを希望しちゃう方はaki@appstars.jpまでご連絡ください。