Discussions

Q画像の横のテキストを縦位置で中央揃えにしたい

https://gist.github.com/1342852 サイドバーにこういう風にアイコンと id を「テキストの縦位置は中央揃えで」載せたくて CSS をコピペしたのですが、はてなダイアリーに適用するとテキストの縦位置が中央揃えになりません。 http://d.hatena.ne.jp/a666666/ はてなダイアリーの HTML をコピーして CSS を適用したのが下のやつで、そちらもちゃんと中央揃えになってるのではてなダイアリーのデフォルトの CSS が影響しているのだと思うのですが、 Firebug などで見てもよくわかりません。中央揃えにならないのは何故なんでしょうか。そして中央揃えにするためにはどうすればいいんでしょうか。

Sample Code

AAnswer to: 画像の横のテキストを縦位置で中央揃えにしたい

---

imgにvertical-align: middle;が必要です。真ん中揃えがわかりやすいようにフォントサイズを小さくしました。

kyanny

できました、ありがとうございます!
どうして img に vertical-align: middle; を指定するとその後ろ?の要素が影響を受けるのかわからないのですが、何故なんでしょうか?

---

デフォルトだとvertical-alignはbaselineなので画像とテキストはベースラインにそって並びます。つまり画像の下端と大文字のOなどの下端が揃った状態です。

画像にmiddleを指定すると、画像は行ボックスの真ん中になります。テキストはbaselineのままなのでずれそうですが、行ボックスの高さはテキストの高さなので、画像とテキストの縦方向の中心が揃います。テキスト基準の行ボックスから上下はみ出して配置されるとかそんなイメージですかね。

vertical-alignの挙動はかなり仕様を熟読して色々試さないと把握できないと思うので、こういう高さが明確な場合はline-heightで強引に位置揃えしたり、画像を背景画像として表示したりして縦方向にセンタリングする方が多分簡単です。

kyanny

詳しい説明ありがとうございます!「縦方向の中心が揃う」はイメージできました。
line-height を使う例はウェブでいろいろ例があったので、自分で試して研究してみます。背景画像に指定する、なども試してみます。

Post a question

You can post JavaScript, HTML, CSS related questions with attached reference to actual codes and get the answers likewise.

Ask a question

  • 1. Click the ‘Post a question’ above

  • 2. Enter question details, reference code, and click ‘Add question’ button

  • 3. Question will be paired with the code on display

Add an answer

  • 1. Choose a question

  • 2. Enter answer details, attach the reference code and click ‘add answer’ button

  • 3. Your answer will accompanied with attached code

Tag