CSSで文字や画像横中央に文字や画像を合わせる方法/vertical-alignの使い方

sailboats IT

CSSで要素の縦位置を決定する方法はいくつかあります。横方向に比べて意外と難易度が高く、実際にやるとうまくいかなかったりもしますが、そんな中でももっとも厄介なvertical-alignを使った文字と画像の位置調整について解説します。テーブルについては触れません。

Advertisements

成果物

たとえばこんな感じの状態を達成したいと思います。
ABC

vertical-alignプロパティの使い方

横方向の文字をそろえるときは親要素にtext-alignを使いますが、それの縦版のようなネーミングです。ただしこちらはdisplay:inline(もしくはdisplay:table-cell)の要素に対して使用できます。vertical=垂直に、align=合わせる。

文字や画像の縦位置調整
vertical-align:値

このプロパティはなかなか癖があり、次のように指定してもボックスの中心や底にいきません。

testtest
<!-- html -->
<div class = "box">
<span class="vert-middle">test</span>
<span class="vert-bottom">test</span>
</div>

/*CSS*/
.box{height:60px;
border:1px solid black;
}

.vert-middle{
vertical-align:middle;
}

.vert-bottom{
vertical-align:bottom;
}

そこで、頭に別の文字を追加してやると……。

testtest
<!-- html -->
<div class = "box">
<span class = "parent">親</span>
<span class="vert-middle">test</span>
<span class="vert-bottom">test</span>
</div>

/*CSS*/
.parent{
    font-size:40px;
}

その文字に対して反応して? 文字位置が調節されました。なんなんでしょうかこれは。

vertical-alignの考え方

vertical-alignは同じ行にある他の要素(または行)の高さに依存するプロパティです。他の文字が小さかったり、設定上差が小さければほとんど動きません。

親要素topmiddlebottomtext-topbaselinetext-bottom20%10px
topmiddlebottomtext-topbaselinetext-bottom20%10px
middlebottomtext-topbaselinetext-bottom

baseline

vertical-alignはデフォルトではbaselineとなり、これはフォントの基準線に合わせて文字の高さを揃えます。文字の大きさが変わった場合も、vertical-alignがbaselineの場合はフォントの基準線を元に行内での文字の縦位置が決定されます。
vertical-alignを変更することで、この基準線の高さを変えることが可能です。
baseline以外の使用できる値は次の通り。

top

baselinetop
topbaseline
baselinebaseline line-height:150pxtop

topは行の最も高い位置に上端を合わせます。

bottom

baselinebottom
baseline padding:30pxbottom
baseline line-height:50pxbottom

bottomは行の最も低い位置に下端を合わせます。paddingは行の高さに含まれません。

middle

baselinemiddle
baselinemiddle
middle line-height:120pxbaseline
middlebaseline line-height:120px

middleは行の中の中心線にフォントの中心線を合わせます。挙動としては「でかい文字に使うと効く」という感じ。
とりあえず全部middleにしとくと、真ん中に一本線が通った並び方になります。

pixelABCDEFGH

text-top

baselinetext-top
text-topbaseline
baselinesg
baselinetext-top

普通にテキストとして使うと全然top感がないですが、イメージに使うことで行の中で基準となるテキストの上線を基準に、「ぶら下がる」ように表示することができます。テキストの場合、このプロパティが真価を発揮するには入れ子構造の中で使う必要があります。top、middle、bottomとちがって、行の高さは関係ありません。

text-bottom

baselinetext-bottom
baselinesg
baselinetext-bottom

text-topの反対で、基準となるテキストの下線を基準にします。

その他

数値や%で指定することも可能です(これが一番話が早いかも)。

2px4px6px8px10px
CSSの便利な使い方・プロパティ逆引きリファレンス
HTMLと合わせてぜひマスターしたい、CSS関連の記事のまとめとなります。プロパティの名称と使用用途を合わせて併記しています。 ちょっととっても数少ないですが、段々増える予定です。

コメント