BLOG ブログ

> ブログ

こんにちは!WEBデザイナーのこたです。
アイコンのサイズをテキストに揃えて配置する時、どのように実装していますか?

1行のテキストの中に、異なるフォントサイズの文字や画像を挿入すると、それらと通常のテキストが綺麗に揃わないことがあります。
そういうときに位置を調整する2つの方法をご紹介いたします。

解決方法

  1. ①vertical-alignで位置調整
  2. ②FlexBoxを使って位置調整

vertical-alignで位置調整

vertical-alignプロパティを使うときのポイントは、このプロパティを「位置を調整したいインラインボックスに直接適用すること」です。
例えば、以下サンプルではimgタグで挿入されるアイコン画像とテキストを横に並べています。
このようなときに画像とテキストの位置を調整するのであれば、imgタグにvertical-alignプロパティを適用します。

See the Pen
yLgQvmb
by こた@WEBデザイナー (@kitako425)
on CodePen.

vertical-alignはインラインボックスにのみ適用される!

vertical-alignはインラインボックスの縦方向の位置を調整するプロパティです。
「テキストの行揃えを変更するプロパティ」だと思われがちですが、実際にはそうではありません。
例えば上記のようなサンプルのように画像とテキストが並ぶ場合に親要素(サンプルではaタグ)にvertical-alignプロパティを設定しても、うまく整列してくれません。
なぜかといえば、vertical-alignプロパティは、テキスト行全体の行揃えを調整するものではなく、個別のインラインボックスの位置を調整するものだからです。
そのため、このプロパティを使用するときは、imgやspanなどのインラインボックスで表示される要素に直接適用する必要があります!

vertical-alignプロパティの値

vertical-alignプロパティの値には、専用のキーワドか、もしくは「数値+単位」を指定。
専用のキーワードには次のようなものがあります。

説明 表示例
baseline 文字のベースラインに整列(日本語の文字の場合はtext-bottomと同じ)
text-top 親要素のコンテンツ領域の上端に整列
middle 文字の縦の高さの1/2の高さに整列
top テキスト行の上端に整列
bottom テキスト行の下端に整列

FlexBoxを使って位置調整

flexboxはCSS3から追加されたレイアウト用のモジュールです。
要素を横並びにする時にはとっても便利なプロパティですよね。
flexboxには縦の行を揃えるプロパティもあるのです。
align-items: center(値);」を追加するだけで中央に配置することもできます。
他の位置に整列したい場合は値を変更してください。

display:flex;
align-items: center;

See the Pen
eYgbvxO
by こた@WEBデザイナー (@kitako425)
on CodePen.

まとめ

今回は2つの方法についてご紹介しました。
アイコン画像とテキストの位置が気になることは結構あるので、細かい部分まで気を使い調整をしてみてください。