こんばんは。@nyagihimeです。ボタンサイズを一番近いものにして(Googleの+1みたいにサイズを選べる場合は)、それを横に並べた時、それでも微妙にずれること、ありませんか?
自分はよく悩まされてました。
主にFacebookのいいねがちょっとだけずれるんですよねぇ…。
これをなんとかする方法をいろいろと考えていたのですが、
1 2 3 4 5 6 7 8 9 10 11 |
<div class="share_wrap"> <div class="share_btn"> Facebook用コード </div> <div class="share_btn"> Google+用コード </div> <div class="share_btn"> Twitter用コード </div> </div> |
このようにそれぞれをDIVで囲んで、
1 2 3 4 5 6 7 |
.share_wrap { display:table; } .share_btn { display:table-cell; vertical-align:middle; } |
親側に「display:table」子側(ボタンが入る側)に「display:table-cell」と「vertical-align:middle」を付けて中央揃えにしてみたところ、一番すっきりと並ばせることができました。
ただし、IE6とIE7ではこの「table-cell」は無視されてしまいますので、table-cellのかわりに「display:inline」と「zoom:1」を利用すれば大丈夫なはずです。
コメントする