CSSで要素の縦位置を決定する方法はいくつかあります。横方向に比べて意外と難易度が高く、実際にやるとうまくいかなかったりもしますが、そんな中でももっとも厄介なvertical-alignを使った文字と画像の位置調整について解説します。テーブルについては触れません。
成果物
たとえばこんな感じの状態を達成したいと思います。
ABC
vertical-alignプロパティの使い方
横方向の文字をそろえるときは親要素にtext-alignを使いますが、それの縦版のようなネーミングです。ただしこちらはdisplay:inline（もしくはdisplay:table-cell）の要素に対して使用できます。vertical＝垂直に、align＝合わせる。
vertical-align:値
このプロパティはなかなか癖があり、次のように指定してもボックスの中心や底にいきません。
<！-- 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;
}そこで、頭に別の文字を追加してやると……。
<！-- 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は同じ行にある他の要素（または行）の高さに依存するプロパティです。他の文字が小さかったり、設定上差が小さければほとんど動きません。
baseline
vertical-alignはデフォルトではbaselineとなり、これはフォントの基準線に合わせて文字の高さを揃えます。文字の大きさが変わった場合も、vertical-alignがbaselineの場合はフォントの基準線を元に行内での文字の縦位置が決定されます。
vertical-alignを変更することで、この基準線の高さを変えることが可能です。
baseline以外の使用できる値は次の通り。
top
topは行の最も高い位置に上端を合わせます。
bottom
bottomは行の最も低い位置に下端を合わせます。paddingは行の高さに含まれません。
middle
middleは行の中の中心線にフォントの中心線を合わせます。挙動としては「でかい文字に使うと効く」という感じ。
とりあえず全部middleにしとくと、真ん中に一本線が通った並び方になります。
ABCDEFGHtext-top
普通にテキストとして使うと全然top感がないですが、イメージに使うことで行の中で基準となるテキストの上線を基準に、「ぶら下がる」ように表示することができます。テキストの場合、このプロパティが真価を発揮するには入れ子構造の中で使う必要があります。top、middle、bottomとちがって、行の高さは関係ありません。
text-bottom
text-topの反対で、基準となるテキストの下線を基準にします。
その他
数値や%で指定することも可能です（これが一番話が早いかも）。
コメント