CSSで四角形を描く 3 テキスト表示

CSSで作成した四角形（長方形）の中にテキストを描画していきます。

中央揃え

長方形の中心にテキストを表示します。

ソースコード

Html

<div class="rect"><p>長方形の中のテキストを中央揃えにする。</p></div>

CSS

Case1 display: table-cellを使う

.rect {
    width: 200px;
    height: 100px; 
	border: 1px solid;
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}
.rect p{
	margin:20px;
}

vertical-alignを適用できるのは、インライン要素とテーブルセルだけなのでdivをtable-cellに変更しています。

Case2 positionで絶対配置にする

.rect {
	width: 200px;
	height: 100px; 
	border: 1px solid;
	text-align:center;
	position: relative;
}
.rect p{
	position: absolute;
	left: 0;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	margin:0px 20px 0 20px;
}

position: absoluteとし、top: 50%とすることでテキストの縦方向のtop位置を真ん中にしています。水平方向の中央揃えはtext-align:centerが効きますが、文章が長いと横一杯に広がってしまい中央寄せの意味が薄いのでmarginで余白を作っています。