【初心者向け】CSSのvertical-alignを基礎から解説

vertical-alignプロパティとは

まず、vertical-alignの正しい読み方は「バーティカル・アライン」ですので、覚えておきましょう。

先述したとおり、「vertical-align」 プロパティは画像や文章などの縦の位置を指定するのに使用するプロパティです。例えば、inline-blockで複数横並びにさせたコンテナの縦の位置を揃えたいなどといった時に活用ができるプロパティとなります。

しかし、どの要素でも指定できるわけではなく、インライン要素またはテーブルセルにしか適用されないという条件があります。

もしvertical-alignが効かないというときは、要素のdisplayプロパティが何かを疑った方がいいでしょう。vertical-alignが効かない場合の原因や解決方法についても後述していきます。

まずは、「vertical-align」プロパティの基本的な使い方について解説していきます。

vertical-alignの基本的な使い方

vertical-alignプロパティは「インライン要素」と「テーブルセル」にしか適用されません。

「div」タグや「p」タグといったブロック要素にはいくら指定しても適用されることはありません。vertical-alignの使い方の説明の前に、適用される「インライン要素」と「テーブルセル」について説明していきます。

「vertical-align」が使用できる要素

「vertical-align」はインライン要素とテーブルセルに適用されると前述しました。まず、インライン要素とテーブルセルについて解説していきます。

インライン要素とは

インライン要素とは文章の一部として扱われる要素のことで、よく使われるタグでは「span」タグや「a」タグなどが該当します。

インライン要素で高さや幅の指定はできず、それぞれの初期値もインライン要素の内容によって決まっていきます。

テーブルセルとは

テーブルセルとは、「table」タグで作られたテーブル内にある「th」タグ・「td」タグで指定したセルのことです。

vertical-alignは、このセル内で位置を指定することが可能となります。

vertical-alignの記述方法

では、vertical-alignの記述方法について説明します。

適用される条件として、「インライン要素」または「テーブルセル」のタグに対して使用します。次のように記述をします。

span{
/* middle：選択した要素の中心を親要素の縦の位置の中心に合わせる */
vertical-align: middle;
}

この記述でvertical-alignプロパティが適用されます。

次に、値や値ごとに適用させた要素の縦の位置について解説していきたいと思います。値を使用したときの設定として、divタグの中に親要素(pタグ)の中に入れた要素(spanタグ)を次のHTMLとCSSで設定しました。

＜HTML＞

<div>
<p class=”oya”>abcdefg<span class=”sample”>対象要素</span</p>
</div>

今回は、親要素を「abcdefg」・子要素を「対象要素」と表示するようにしています。親要素がアルファベットなのは、「ベースライン」についての把握がしやすいからです。

次に、今回説明するにあたり使用するCSSについてです。

＜CSS＞

/* wrap */
div {
background: #32FF32;
}
/* 親要素 */
.oya {
font-size: 60px;
background-color: #cccccc;
line-height: 2.0;
}
/* 対象の要素 */
.sample {
font-size: 15px;
background-color: #ffffff;
line-height: 1.0;
/* 値に応じてvertical-alignの値を変えていく */
vertical-align: bottom;
}

今回はわかりやすいように対象の要素のline-heightプロパティを「1.0」に設定し、また背景色もそれぞれ設定しています。ご自身で試される場合は、背景色などを見やすい色に変更してみてください。

「vertical-align」の値について

vertical-alignプロパティで指定できる値は、中央寄せや上端寄せなどさまざまです。状況によって使用する値が変わってくるので、状況に応じて使い分けていきましょう。

また、テーブルセルの場合は適用できない値も存在しているため、値ごとの使い方についてしっかり理解していきましょう。

では、vertical-alignの値についてひとつずつ解説していきます。

baseline(初期値)

vertical-alignプロパティの初期値は「baseline」です。vertical-alignを指定していない場合のインライン要素などは、この「baseline」が適用されているということです。

baselineの位置を知るときは、まず「x-height」について知る必要があります。

「x-height」とは、アルファベットの小文字表記した際のアルファベットの「x」の上から下まで間のことをいいます。そのx-heightの下の部分がフォントの基準線、つまり「baseline」です。vertical-alignの値を「baseline」に指定した場合は、親要素のbaselineに合わせて対象の要素が整列されます。

記述方法は、先ほど設定した「CSS」内のvertical-alignを「baseline」に変更して確認してみてください。上の画像より親要素と対象の要素が下端揃いになっているところが「baseline(基準線)」となります。

.sample{
vertical-align: baseline;
}

top

vertical-alignの値を「top」に指定すると、対象要素が行レベルの上端に合わせて、上端揃いで整列されます。

今回はわかりやすいように親要素はline-heightプロパティを「2.0」で指定していますが、値が小さくなればその分、親要素の文字に近づいていきます。

記述方法は先ほど設定した「CSS」内のvertical-alignの値を「top」に変更して確認してみてください。

.sample{
vertical-align: top;
}

middle

「middle」を指定した場合、baselineよりもx-heightの高さの半分だけ上の位置に指定した要素が中央揃いで整列されます。

.sample{
vertical-align: middle;
}

bottom

vertical-alignの値を「bottom」に指定すると、対象要素が行レベルの下端に合わせて、下端揃いで整列されます。

記述方法は、先ほど設定した「CSS」内のvertical-alignの値を「bottom」に変更して確認してみてください。

.sample{
vertical-align: bottom;
}

text-top

「text-top」は、親要素の文章の上端に合わせて指定した要素が上端揃いで整列されます。

「top」は行の上端に対し、「text-top」は親要素の文章の上端なので使用時は注意が必要です。なお、「text-top」はテーブルセルでは無効となります。

.sample{
vertical-align: text-top;
}

text-bottom

「text-bottom」は、親要素の文章の下端に合わせて指定した要素が下端揃いで整列されます。

「bottom」は行の下端に対し、「text-bottom」は親要素の文章の下端なので使用時は注意が必要です。なお、「text-bottom」はテーブルセルでは無効となります。

.sample{
vertical-align: text-bottom;
}

super

vertical-alignの値を「super」に指定すると、対象要素のベースラインを親要素のテキストの上付き文字の位置まで上げます。

「super」はテーブルセルでは無効となります。

.sample{
vertical-align: super;
}

sub

vertical-alignの値を「sub」に指定すると、対象要素のベースラインを親要素のテキストの下付き文字の位置まで下げます。

「sub」はテーブルセルでは無効となります。

.sample{
vertical-align: sub;
}

auto

vertical-alignの値を「auto」に指定すると、基本的には親要素の「baseline」に合わせて表示されますが、Webブラウザによって自動的に位置を判断して調整されます。

.sample{
vertical-align: auto;
}

パーセント(％)

baselineを「0」として、「％」で指定が可能です。line-heightプロパティの高さを基準値として指定できます。パーセントごとにご紹介しますので参考にしてください。

※親要素のline-heightプロパティの値によっては表示が変わっていきます。

.sample{
vertical-align: 0;
}

.sample{
vertical-align: 100%;
}

.sample{
vertical-align: 200%;
}

数値と単位

vertical-alignの値は数値としても指定が可能です。「px」や「em」などの単位を使用して値を指定し、位置が指定できます。

それでは、「0px」と「30px」を指定した場合の表示をご紹介します。

.sample{
vertical-align: 0;
}

.sample{
vertical-align: 30px;
}

CSSのvertical-alignが効かない原因と対処方法

vertical-alignが効かない原因と対処方法について解説していきます。

displayプロパティの指定が違う。

vertical-alignプロパティを設定しようとしている対象の要素のdisplayプロパティが「inline」「table-cell」以外の場合は適用されません。

対象の要素のdisplayが「inline」「inline-block」「inline-flex」「table-cell」になっているか確認しましょう。

浮いている要素には適用されない

vertical-alignを適用しようとしている要素に対して、プロパティが「float」や「position」で、値が「absolute」「fixed」の場合、要素が浮いてしまい適用されません。

どうしても「absolute」や「fixed」を使用する必要がある場合は、vertical-alignプロパティではなく、そちらで調整していきましょう。

「middle」で中央より下寄り

vertical-alignプロパティで値を「middle」にして親要素が漢字など日本語の場合、対象要素の表示が中央より下寄りに見えてしまいます。

次の画像は親要素を漢字で表示し、vertical-alignを「middle」で指定した場合の見え方となります。

「middle」で中央寄せのはずが、「対象要素」が下寄りに見えてしまっています。「middle」の高さはx-heightの高さの半分より上です。そのため、親要素が日本語だと上のbaselineよりも高く表示されてしまい、対象要素が下寄りに見えてしまいます。

これを中央に寄せたい場合は、以下の記述を追加することで調整が可能です。

.sample {
display: inline-block
transform: translateY(-5px);
}

「translateY」の数値については適宜位置を確認しながら調整してください。

まとめ

今回は、vertical-alignプロパティについて解説しました。画像やinline-blockで作ったコンテナなどの位置調整に有効で、使用頻度の多いプロパティです。

vertical-alignプロパティを覚えて、活用していきましょう。

WEBでのお問い合わせはこちら