「ブロックレベル要素の上下中央揃え～vertical-align:middleが効かない場合～」の編集履歴（バックアップ）一覧はこちら
追加された行は緑色になります。
削除された行は赤色になります。
インライン要素やテーブルセルの上下中央揃えに関してはvertical-alignでいけますが、ブロックレベル要素の上下中央揃えはどのようにしていったらよいのでしょうか？
おそらく検索から来た方はそこで悩んだと思います。これを解決していきます。12月2日記事
~
~
イメージ
&image(width=400,blocklevel001.png)
~
~
目次
#contents
~
~
----
~
*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でいけますが、ブロックレベル要素の上下中央揃えはどのようにしていったらよいのでしょうか？
おそらく検索から来た方はそこで悩んだと思います。これを解決していきます。12月2日記事
~
~
イメージ
&image(width=400,blocklevel001.png)
~
~
目次
#contents
~
~
----
~
*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;
}
~
~
*まとめ
ブロックレベル要素で悩んだ場合はこれを使いましょう。
~
~
以上
