横並びと中央寄せにはdivタグを使うサイトやブログではFacebookの「いいね!」ボタン、twitterの「ツイート」ボタン、はてブの「ブックマーク」ボタン、LINEの「LINEで送る」ボタンを設置することがあります。これらのSNSボタンをtableタグやliタグで適当に横並びにしてみると、ボタンの上下がずれたり、中央に表示されません。そもそもtableタグは表で伝えたいときに使うために好ましくありません。ここは時間をかけたくない箇所だったため、今回はシンプルにdivタグの入れ子を使ってみましょう。各ボタンをdivタグで囲ってwidthを指定することで、ソーシャルメディア側の仕様変更にも強くなります。0;}今回使ったCSSプロパティを解説はじめにsocialクラスにheight、margin、paddingを指定していますが、これはボタンの周りに余白を入れるためであり、必須ではありません。ポイントはボタン全体を囲むsocial_innerクラスのpositionをrelativeにして、位置を右に50%ずらすことです。各ボタンのpositionもrelativeにして、今度は位置を左に50%ずらします。これで中央にボタン全体が配置できます。各ボタンはmarginで左に10pxの余白を設けています。Facebookボタンの横幅を72pxにしたように、各ボタンのwidthを指定することで1pxのずれもなくなります。ブラウザチェックはChrome、Safari、FireFox、IEで問題ないです。IE6のみ縦にずれますが、シェアも1%未満でCSSハックは使う必要もないため、割愛しました。10種類以上の副業を経験。26歳で法人化、現在12期目、副業関連の著書4冊。