【CSS/html】文字やdivを下揃えする方法４選

「テキストやdivを下揃えにしたいんだけどどうやるの？」

CSSで文字やdivを下揃えする方法を4つ紹介します。

【方法1】display:flexとalign-items:flex-endを指定

<style>
.example{
    /*コレ*/display: flex;
    /*コレ*/align-items: flex-end;
    border: 1px solid #999;
    background: #ffeded;
    padding: 10px;
}
.example>div{
    border: 1px solid #999;
    background: #bad7f0;
    padding: 10px;
    width: 100px;
}
</style>
<div class="example">
    <div>左<br>左<br>左<br>左</div>
    <div>右</div>
</div>

「display:flex」は子要素の位置を調整できるCSSです。

「align-items」はflex内の子要素の縦の位置を調整するCSSです。

「align-items: flex-end」を指定すると下揃えにできます。

display:flexについてもっと詳しく知りたいかたはこちら↓

【方法2】display:inline-blockを指定

<style>
.example2{
    border: 1px solid #999;
    background: #ffeded;
    padding: 10px;
}
.example2>div{
    /*コレ*/display: inline-block;
    border: 1px solid #999;
    background: #bad7f0;
    padding: 10px;
    width: 100px;
}
</style>
<div class="example2">
    <div>左<br>左<br>左<br>左</div>
    <div>右</div>
</div>

「display:inline-block」はブロック要素とインライン要素両方の特徴を合わせ持つようにさせるCSSです。

横並べさせつつwidthを指定することなどができます。

画像はこれで揃えることができます。

ただしこの方法ではインラインの特性上左右に隙間ができてしまいます。これはhtmlソースの空白も詰めてしまうと消すことができますが、やっかいと感じるのであればflexの方法をおススメします。

inline-blockはもともと下揃えする特徴があります。

厳密に言うとベースライン（文字のライン）がそろっており、padding-bottomが違うと下揃えにならないので注意です。

【方法3】tdにvertical-align:bottomを指定

テキスト

テキスト テキスト テキスト

テキスト テキスト テキスト テキスト テキスト

<style>
.example3 td{
    /*コレ*/vertical-align: bottom;
}
</style>
<table border="1" class="example3">
    <tr>
        <td>テキスト</td>
        <td>テキスト<br>テキスト<br>テキスト</td>
        <td>テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト</td>
    </tr>
</table>

tableのtdに対して「vertical-align: bottom」を指定すると下揃えにできます。

ただし、td限定です。divでは効きません。方法1で紹介したflexを使う方法をオススメします。

一応「display:table-cell」を指定することで「vertical-align: bottom」が効くようになりますが、あまりオススメはしません。

【方法4】position:absoluteとbottomを指定

<style>
.example4{
    border: 1px solid #999;
    background: #ffeded;
    height: 150px;
    /*コレ*/position: relative;
}
.example4>a{
    display: block;
    border: 1px solid #999;
    background: #bad7f0;
    padding: 10px;
    width: 100px;
    /*コレ*/position: absolute;
    /*コレ*/bottom: 10px;
    left: 10px;
}
</style>
<div class="example4">
    <a href="#">ボタン</a>
</div>

position:absoluteは要素を任意の位置に指定するCSSです。

これで下を基準に位置指定することで下揃えができます。

position:absoluteについて詳しくはこちら↓

【まとめ】下揃えする方法

• 【オススメ】display:flexとalign-items:flex-endを指定
• display:inline-blockを指定
• tdにvertical-align:bottomを指定
• position:absoluteとbottomを指定

以上、CSSで下揃えする方法を4つ紹介しました。