vertical-alignとtext-alignは違うのだよ

2016年10月30日カテゴリー : CSS コメント : 0

　vertical-align の使い方がよくわからなかったので調べてみました。text-align と名前が似ているので同じように使えるものだと思っていたのですが、かなり別物だったので忘れないようにまとめておきます。

text-alignみたいには使えない

text-align といえば、要素内のテキストを中央揃えに配置するのによく使います。

<div class="test">
    チョリソ
</div>

チョリソ

</div>

.test {
    width: 300px;
    height: 100px;
    background: #F0F0E8;
    text-align: center;
}

.test {

width: 300px;

height: 100px;

background: #F0F0E8;

text-align: center;

}

20161030_1

これと同じ要領で縦方向に中央揃えにしようとして vertical-align を指定しても効果がありません。

.test {
    width: 300px;
    height: 100px;
    background: #F0F0E8;
    vertical-align: middle;
}

.test {

width: 300px;

height: 100px;

background: #F0F0E8;

vertical-align: middle;

}

vertical-alignとは

vertical-align はインライン要素とテーブルセル要素のみに適用されるプロパティです。インライン要素とブロック要素による分類は HTML5 で廃止されましたが、このほうが説明が簡単なのでご容赦を。まずはわかりやすいテーブルセル要素からみてみましょう。

テーブルセル要素

ブログに表を作成するときに使われるのがテーブルセルです。このテーブル内部にテキストがあった場合、vertical-align を設定して位置を指定することができます。

<table>
    <tr>
        <td class="cell_1">ハモン・イベリコ</td>
        <td class="cell_2">アヒージョ</td>
        <td class="cell_3">ピンチョ・モルノ</td>
    </tr>
</table>

<table>

<tr>

<td class="cell_2">アヒージョ</td>

</tr>

</table>

td {
    width: 150px;
    height: 100px;
    border: 1px solid #F0F0E8;
}

.cell_1 {
    vertical-align: top;
}

.cell_2 {
    vertical-align: middle;
}

.cell_3 {
    vertical-align: bottom;
}

td {

width: 150px;

height: 100px;

border: 1px solid #F0F0E8;

}

.cell_1 {

vertical-align: top;

}

.cell_2 {

vertical-align: middle;

}

.cell_3 {

vertical-align: bottom;

}

20161030_2

インライン要素

vertical-align はインライン要素にしか適用されないとよく説明されますが、インライン要素は高さを指定できないというルールがあるので、高さをもったブロック要素内のテキストが中央に配置されるようなイメージをもつと誤解のもとです。

どちらかというと、同じ行内に並んでいるインライン要素の高さの基準をどのように揃えるのかを指定するプロパティであると考えたほうがよろしい。

例えば、複数のフォントサイズの文章が同じ行内に混在しているような場合、vertical-align を使ってフォントのベースラインをどの位置に調整するのかを指定することができます。

こちらのページがくわしいです。

vertical-align－スタイルシートリファレンス

指定できるプロパティは次のとおりです。

baseline
top
middle
bottom
text-top
text-bottom
super
sub

このほかに %、em、ex、px などの値で指定することもできます。

20161030_3

画像をお借りしてしまいましたが、詳しく説明されているので一読することをおすすめします。

ブロック要素内のテキストを縦方向で中央にするにはどうしたらよいか

text-align でブロック要素内のテキストを中央に揃える的な設定の仕方について考えます。

テキストが1行の場合

当ブログにも設置していますが、グローバルナビゲーションのようなテキストが一行しかない場合です。

20161030_4

このような場合には、わざわざ vertical-align を使わなくても済みます。height と line-height を同じ値にすればよいだけです。

<div class="test">
    サルモレッホ
</div>

サルモレッホ

</div>

.test {
    width: 300px;
    height: 100px;
    line-height: 100px;
    border: 1px solid #aaa
}

.test {

width: 300px;

height: 100px;

line-height: 100px;

border: 1px solid #aaa

}

20161030_5

テキストが複数行の場合

幅や高さを指定しないとテキストの大きさなってしまうので忘れないようにしてください。

<div class="test">
    スペイン料理（スペインりょうり）とはスペイン固有の料理のことであり、イベリア半島の山の幸と地中海の海の幸をよく生かした料理で知られる。
</div>

スペイン料理（スペインりょうり）とはスペイン固有の料理のことであり、イベリア半島の山の幸と地中海の海の幸をよく生かした料理で知られる。

</div>

.test {
    width: 350px;
    height: 100px;
    display: table-cell;
    vertical-align: middle;
    border: 1px solid #aaa
}

.test {

width: 350px;

height: 100px;

display: table-cell;

vertical-align: middle;

border: 1px solid #aaa

}

20161030_6

画像とテキストを中央で揃える

画像はインライン要素なので、特に設定しなければテキストは隣に並びます。

20161030_7

<div class="test">
    <img src="paella.jpg">パエリア
</div>

<img src="paella.jpg">パエリア

</div>

このテキストを中央に揃える場合にはテキストを div などで囲ってやるとよいです。

<div class="parent">
    <img src="paella.jpg">
    <div class="test">
        パエリア
    </div>
</div>

パエリア

</div>

.parent {
    display: table;
}

.test {
    width: 150px;
    display:table-cell;
    vertical-align: middle;
    border: 1px solid #aaa;
}

.parent {

display: table;

}

.test {

width: 150px;

display:table-cell;

vertical-align: middle;

border: 1px solid #aaa;

}

画像とテキストの親要素に display:table; を指定する必要がありますが、この方法ならテキストが複数行でも中央に揃えることができて便利です。

Webデザイン必携。プロにまなぶ現場の制作ルール84

posted with カエレバ

北村崇,浅野桜エムディエヌコーポレーション 2016-03-23

Amazon

楽天市場

Tag : CSS