CSS | テキストを下揃えにする方法

2021-07-12CSS テキスト,CSS

CSSでテキストの位置を親要素の下部に下揃え（下寄せ）にする方法を紹介しています。

下段左寄せ、下段中央寄せ、下段右寄せのパターンのサンプルコードです。

テキスト位置を下揃えにする

テキスト位置を下揃えにしているCSSサンプルコードになります。

See the Pen CSS | Change text size 1 by yochans (@yochans) on CodePen.

サンプルHTMLではテキスト用のpタグを作成、下揃えと左寄せ、中央寄せ、右寄せとそれぞれのclass名をHTMLのpタグにを付与しています。

<div class="container">
	<p class="bottom-left">Bottom Left</p>
	<p class="bottom-center">Bottom Center</p>
	<p class="bottom-right">Bottom Right</p>
</div>

テキストの下揃えにはpositionプロパティを利用します。

高さを持つ親要素にposition: relative、テキストのpタグにはposition: absoluteを指定。

テキストは絶対値で位置を指定してbottom: 0とする事で下部に表示するようにしています。

左寄せはleft: 0、右寄せはright: 0、中央寄せにはleft: 50%としてテキスト要素の横幅の半分をtransform: translateX(-50%)とする事で左に位置をずらして中央にくるように調整います。

.container {
	position: relative;
	width: 100%;
	height: 200px;
	background: #000;
}

.container p {
	color: #FFF;
	padding: 0 8px;
	margin: 0;
}

.bottom-left {
	position: absolute;
	bottom: 0;
	left: 0;
}

.bottom-center {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}

.bottom-right {
	position: absolute;
	bottom: 0;
	right: 0;
}