2019.11.29 2019.11.29

【text-align / vertical-align】行揃えと縦方向の位置

みいと

【text-align】行揃えの設定

text-alignプロパティをブロックレベル要素に指定すると、行揃えを設定できます。
text-alignプロパティには下記のキーワードを指定します。

left	左揃え
center	中央揃え
right	右揃え
justify	両端揃え

text-alignプロパティを下記のHTMLで試してみると、

<p style="text-align: left;">text-align: left;</p>
<p style="text-align: center;">text-align: center;</p>
<p style="text-align: right;">text-align: right;</p>

このようになりました。
左揃え、中央揃え、右揃えを使い分けて見やすいサイトを作っていきたいですね。

text-align

ポウ

justifyはよくわからんかった・・・( ；∀；)

【vertical-align】縦方向の位置

vertical-alignプロパティを使うとインライン要素の縦方向の位置を設定することができます。

vertical-alignプロパティには下記の指定方法があり、初期値は「baseline」です。

baseline	ベースラインを親要素のベースラインに合わせる。
top	上を揃える
middle	中央を揃える
bottom	下を揃える
super	上付き文字の位置に表示
sub	下付き文字の位置に表示
単位つきの値	ベースラインからの距離を指定する
パーセンテージ	ベースラインからの距離をパーセンテージで指定する

vertical-alignプロパティを下記のHTMLで試してみると、

<p>
    <span style="vertical-align: top;">top</span>
    <span style="vertical-align: middle">middle</span>
    <span style="vertical-align: bottom">bottom</span>
    <span style="vertical-align: super">super</span>
    <span style="vertical-align: sub">sub</span>
</p>

このようにテキストの位置が調整されました。

vertical-alignプロパティを下記のHTMLのようにテーブルのセルに対して使用すると、

<style>
    th {
        border: solid 1px gray;
        height: 5em;
    }
</style>
<table>
    <tr>
        <th style="vertical-align: top;">top</th>
        <th style="vertical-align: middle;">middle</th>
        <th style="vertical-align: bottom;">bottom</th>
    </tr>
</table>

下記のようにセル内での縦方向の位置を調整できます。

vertical-align