【CSS】Facebookの「いいねボタン」の位置がズレる時の対処法

ソーシャルボタンを横並びにしたとき、Facebookのいいねボタンだけ位置が下にズレる！そんな時はCSSで解決です。 いくつかのソーシャルボタンを「inline-block」を使って横並びにしたとき、ほとんどの場合いいねボタンだけ下にズレます。 これめちゃくちゃ気になるんですが、色々なブログやサイトで放置されているんですよね…原因が探り難いのが理由だとは思いますが。

さて、この気持ち悪い現象はたった3行のCSSで解決できます。

ソース

HTML部分は普通です。各々コードを突っ込んでください。 続いてCSS部分ですが、これだけの記述で下揃え・横並びの綺麗なソーシャルボタンボックスが作れます。簡単！ この10～12行目が、いいねボタンのズレを直すための記述です。

いいねボタンのソースコードを見ると、spanタグに直接「vertical-align: bottom;」が指定されているのが分かるかと思います。それをCSSで追加した「vertical-align: baseline !important;」で打ち消せば、他のソーシャルボタンと同じライン上にボタンが配置されるようになるというわけです。こりゃ確かに気付きにくいですわ。 自分のブログを見てこの現象が起きていたら、サクッと修正しておきましょう。