さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【CSS】テキストを縦方向にセンタリングする方法(レスポンシブ対応)

Pocket
LINEで送る

テキストを縦方向にセンタリングする方法として「display:table-cell;」を使用する方法があるが、widthとheightを指定する必要がある。これではレスポンシブ対応する際には不便なので、widthを指定しなくてもテキストを縦方向にセンタリング出来る方法をご紹介。

sass

.box {
	height:150px;
	position: relative;

	p {
		width: 100%;
		margin: 0;
		padding: 0;
		position: absolute;
		top: 50%;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
	}
}

カテゴリー:HP制作, css

コメントを残す

コメント内容