nicepaper @ ウィキ
nicepaper @ ウィキ

インライン要素やテーブルセルの上下中央揃えに関してはvertical-alignでいけますが、ブロックレベル要素の上下中央揃えはどのようにしていったらよいのでしょうか？ おそらく検索から来た方はそこで悩んだと思います。これを解決していきます。12月2日記事

イメージ



目次




vertical-alignはブロックレベル要素には適用できない。

ブロックレベル要素のdivやpやliタグなど、ブロックレベル要素にはvertical-alignは適用できません。 そんな中でブロックレベル要素に適用するためには、positionプロパティとleft: right: top: bottom: +margin: auto;を使って上下中央揃えをします。

コード

HTML 

<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
	<title>ブロックレベル要素の上下中央揃え</title>
</head>

<body>
	<div id="table-s"><!--インライン要素やテーブルセルは適用できるよ。-->
		<p>真ん中</p>
	</div>
	<div id="block"><!--こっちは別の方法で適用させる。-->
		<p class="block-s">ブロックレベル要素ですが真ん中です。</p>
	</div>
</body>

</html>

CSS 

@charset "utf-8";
/* CSS Document */

#table-s {
	display: table-cell;
	width: 300px;
	height: 200px;
	background: #CFF;
	vertical-align: middle;
	text-align: center;
}
#block {
	margin-top: 30px;
	width: 300px;
	height: 200px;
	background: #FCF;
	position: relative;
}
.block-s {
	/*ここから*/
	position: absolute; 	
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 100px;
	height: 60px;
	/*ここまでの表記が重要*/	
	background: #FFC;
}



まとめ

ブロックレベル要素で悩んだ場合はこれを使いましょう。

以上

「ブロックレベル要素の上下中央揃え～vertical-align:middleが効かない場合～」をウィキ内検索
最終更新：2015年12月03日 23:48
添付ファイル