効かない？text-alighとvertical-alignの使い方（垂直水平の位置調整）

2021年5月26日

CSSでコンテンツの位置調整をするときにまず思い浮かぶのがtext-alignとvertical-alignです。

それぞれ水平方向、垂直方向の位置調整をするのに使いますが、
『うまく位置調整できない！』
という声をよく聞きます。

本記事は、CSS初心者の方が、text-alignとvertical-alignを使う時に注意すべきポイントについて解説します。

text-align

text-alignとは

文字や画像などのコンテンツを配置すると、デフォルト状態では左上から詰めて配置されていきます。

これを中央揃えや右揃えなど、テキストの水平方向の配置をコントロールするのにtext-alignを使います。

• text-align: left;・・・左揃え（デフォルト状態）
• text-align:center;・・・中央揃え
• text-align:right;・・・右揃え

事例をあげると、

<p style="background-color:#0ff;">
  ワードプレスはシェアNo1のCMSだ。
</p>

とwebではデフォルトでは左詰めで表示されます。

これをtext-align:center;で中央揃えにすることができます。

<p style="background-color:#0ff; text-align:center;">
  ワードプレスはシェアNo1のCMSだ。
</p>

text-alignを使うときの注意点

しかし、画像をセンター配置にしようとtext-align:center;としても、なぜかうまく効かないことがあります。

次のポイントを見逃しているからです。

• 位置調整の対象はインライン要素である必要がある
• 位置調整対象の親要素（ブロック要素）にtext-alignは適用する必要がある

インライン要素というのは、テキストのように横並びに表示されるコンテンツをいいます。
<span>や<img>など、テキスト以外にもデフォルト状態で横並びに表示されるHTMLタグもインライン要素です。

それに対してブロック要素というのは、行単位でブロックを形成しているコンテンツです。
例えば<p></p>で囲まれた領域は段落というブロックを形成しています。

HTMLブロックとインライン要素の違いとは？WPカスタマイズの必須知識

ワードプレスは管理画面のテーマカスタマイザーである程度のデザイン設定ができますが、カスタムCSSを ...

 https://web-children.com/2021/05/23/html-block-and-inline/

先の事例の

<p style="background-color:#0ff; text-align:center;">
  ワードプレスはシェアNo1のCMSだ。
</p>

というHTMLの場合は、

・位置調整の対象・・・"ワードプレスはシェアNo1のCMSだ"というインライン要素
・位置調整したい対象の親要素・・・<p></p>

ですから、親要素である<p>タグにtext-alignを記述することで、その中に入っているインライン要素であるテキストを中央揃えにすることができたわけですね。

text-alignが効かないときの対処方法

text-alignが効かないのは、次のような間違った方法でtext-alignを使っている場合です。

• ブロック要素を中央揃えにしようとしている
• インライン要素そのものにtext-alignを適用している

2つ目のインライン要素そのものにtext-alignを記述するのはそもそも使い方が間違っている、ということはご理解頂けたかと思うので、1つ目のブロック要素のセンター配置について少し解説します。

ブロック要素を中央揃えにしようとしている

次のような構成のコンテンツがあったとします。
シアン色のブロックの中に横幅60px高さ20pxの赤いボックスが入っています。

<div style="background-color: #0ff">
  <div style="width:60px; height:20px; background-color: red;">
  </div>
</div>

この赤いボックスをセンター配置しようとtext-align:center;を親要素に記述しても位置は変わりません。

<div style="background-color: #0ff; text-align:center;">
  <div style="width:60px; height:20px; background-color: red;">
  </div>
</div>

このように、位置調整したい対象がブロック要素の場合は、text-alignは効かないのです。

ブロック要素をセンター配置するためには

では、どうすればよいかというと、対象ブロックを”インライン要素の特徴を合わせ持ったインラインブロックに変更”すればよいのです。display: inline-block; を使います。

<div style="background-color: #0ff; text-align:center;">
  <div style="width:60px; height:20px; background-color: red; display: inline-block;"> 
  </div>
</div>

このように、対象要素をブロック要素からインラインブロック要素に変換すればtext-alignが効くようになります。

vertical-align

vertical-alignとは

text-alignが水平方向の位置調整に使いましたが、vertical-alignは縦方向の位置調整に使います。

といっても、ブロック内の縦方向に自由に動かせるわけではなく、テキストをその行内で縦方向に動かすのに使います。

テキストの位置は、デフォルト値としては行の中でベースラインという架空のラインに沿って表示されています。
これを縦方向に動かすことができるわけです。

• vertical-align: baseline; ・・・テキストを行のベースラインに揃って表示
  （デフォルト値）
• vertical-align: top; ・・・テキストを行内のトップに表示
• vertical-align: middle; ・・・テキストを行内のセンターに表示
• vertical-align: bottom; ・・・テキストを行内のボトムに表示

vertical-alignと使うときの注意点

vertical-alignは行内の縦方向の位置調整と説明しましたが、その”行”をもう少し具体的に表現すると、”インライン要素”または”表の各セル”となります。すなわち、

• vertical-alignは、インライン要素内または表のセル内のテキストを縦方向に位置調整するのに使う
• vertiacal-alignは調整したいインライン要素または表のセルそのものに適用する

text-alignは調整したいインライン要素の親要素に適用しましたが、vertical-alignは調整したいインライン要素そのものに適用する必要があるということですね。

インライン要素への適用例

テキストの一部の文字サイズを変更した事例です。

<p style="background-color: #0ff">
  ワードプレスは<span style="font-size: 2em;">シェアNo1のCMS</span>だ。
</p>

文字を大きくした”シェアNo1のCMS”をvertical-align:middle;で行の中央に配置します。

<p style="background-color: #0ff">
  ワードプレスは<span style="font-size: 2em; vertical-align: middle;">シェアNo1のCMS</span>だ。
</p>

インライン要素である<span>タグにvertical-alignを適用して位置調整ができました。

表のセルへの適用例

表の事例です。

<table style="width:80%;">
    <tr style="height: 5em;"><th>1位</th><td>WordPress</td></tr>
    <tr style="height: 5em;"><th>2位</th><td>Shopify</td></tr>
    <tr style="height: 5em;"><th>3位</th><td>Joomla</td></tr>
</table>

表の行を表す<tr>タグにvertical-align:middle;を適用して、テキストをセル内縦方向の中央に配置します。

<table style="width:80%;">
    <tr style="height: 5em; vertical-align:middle;"><th>1位</th><td>WordPress</td></tr>
    <tr style="height: 5em; vertical-align:middle;"><th>2位</th><td>Shopify</td></tr>
    <tr style="height: 5em; vertical-align:middle;"><th>3位</th><td>Joomla</td></tr>
</table>

vertical-alignが効かないときとは

よくある間違いが、ブロック内のテキストの配置を変えようとvertical-alignを使う事例です。

高さが5文字分ある段落ブロックにテキストが入っています。

<p style="height: 5em; background-color: #0ff">
  ワードプレスはシェアNo1のCMSだ。
</p>

これをvertical-align:middleでテキストをセンターに持ってこようとしてもできません。

<p style="height: 5em; background-color: #0ff; vertical-align :middle">
  ワードプレスはシェアNo1のCMSだ。
</p>

こういう場合は、まずテキストをspanタグで囲ってから、テキストの行高さをブロックと同じ5文字分に変更してvertical-align: middle;をかけるとよいでしょう。

<p style="height: 5em; background-color: #0ff; vertical-align :middle">
  <span style="line-height: 5em; vertical-align: middle;">ワードプレスはシェアNo1のCMSだ。</span>
</p>

まとめ

text-alignとvertical-alignについて解説してきました。

text-alignは水平方向、vertical-alignは垂直方向の配置をコントロールするのに使うCSSですが、万能的に配置を変更できるかけでもなく、その使い方にも注意が必要です。

もう一度簡単におさらいすると次の通りです。

• text-alignはインライン要素の水平位置を調整するのに使い、その親要素（ブロック要素）に適用する
• vertical-alignは行内のテキストなどを高さ方向に調整するのに使う。その要素自身に適用する。

ワードプレスの始め方
～稼ぐためのしくみづくりまでを
徹底解説！！

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

詳細はこちら

amazonでたった１コインで手に入れる