アイコンとテキストの位置を揃えたい
１行のテキストの中に、異なるフォントサイズの文字や画像を挿入すると、それらと通常のテキストがk綺麗に揃わないことがあります。その時は、vertical-alignプロパティを使って位置を調整します。vertical-alignプロパティを使うときのポイントは、このプロパティを「位置を調整したいインラインボックスに直接適用すること」です。たとえば、<img>タグで挿入されるアイコン画像と、テキストを横に並べるとき、画像とテキストの位置を調整するのであれば、<img>タグにvertical-alignプロパティを使用します。
vertical-alignプロパティ
vertical-alignは、インラインボックスの縦方向の位置を調整するプロパティです。「テキストの行揃えを変更するプロパティ」だと思われがちですが、実際はそうではありません。たとえば、今回のサンプルのように画像とテキストを並ぶ場合に、親要素では<li>にvertical-alignプロパティを設定してもうまく整列してくれません。なぜかといえば、vertical-alignプロパティは、テキスト行全体の行揃えを調整するものではなく、個別のインラインボックスの位置を調整するものだからです。そのためこのプロパティを使うときは、<img>や<span>など、インラインボックスで表示される要素に直接適用する必要があります。vertical-alignプロパティの値には、専用のキーワードか、もしくは「数値+単位」を指定します。単位には「px」か、もしくは「em」を使用します。専用のキーワードには以下のものがあります。
vertical-alignプロパティの主な値
| 値 | 説明 |
|---|---|
| baseline | 文字のベースライン※1に整列（日本語の文字の場合はtext-bottomと同じ） |
| text-top | 親要素のコンテンツ領域の上端に整列 |
| middle | 文字のxハイト※2の1/2の高さに整列 |
| text-bottom | 親要素のコンテンツ領域の下端に整列 |
| top | テキスト行の上端に整列 |
| bottom | テキスト行の下端に整列 |
※1 欧文書体が整列する基準線のことを指します。aやxなど、下に飛び出す部分がない文字は、このベースラインを基準に整列します。gやpなど、下に飛び出す部分がある文字は、飛び出す部分がベースラインよりも下になるように整列されます。
※2 aやxの高さのこと
<!DOCTYPE html>
<html lang="ja">
<head>
<style>
.sns{
padding-right: 12px;
vertical-align: -6px;
}
li{
list-style: none;
}
</style>
</head>
<body>
<div class="box">
<h3>公式SNSチェック</h3>
<ul>
<li><img src="images/fb.jpg" alt="" class="sns">公式ページフォロー</li>
<li><img src="images/fb.jpg" alt="" class="sns">公式ページフォロー</li>
<li><img src="images/fb.jpg" alt="" class="sns">公式ページフォロー</li>
</ul>
</div>
</body>
</html>実行結果
