CSSで文字やテキストを上下中央の中心揃えにする方法について書いていきます。6月20日記事
イメージ
display:table-cellで中央に
ブロック要素を中央に
目次
HTML部
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
<title>上下中央揃え</title>
</head>
<body>
<div id="wrapper">
<div id="box">
<p>文字が入っています。これを中央にするためには<br>
どのようにすればよいのでしょうか？<br>
考えていきます。</p>
</div>
</div>
</body>
</html>
CSS部
@charset "utf-8";
/* CSS Document */
#wrapper{
margin: 10px auto;
padding:20px;
width: 800px;
height:400px;
border: 1px solid #000;
}
#box{
margin: 30px auto;
width: 600px;
height:300px;
border:1px solid #000;
}
p{
}
すると次のような表示になります。
paddingを設定しているため、#boxのmargin-topが効いています。
※CSSでmarginプロパティが効かない時の対策を参照
display:table-cell;vertical-align:middle;text-align:center;を追加していきます。
CSS部
@charset "utf-8";
/* CSS Document */
#wrapper{
margin: 10px auto;
padding:20px;
width: 800px;
height:400px;
border: 1px solid #000;
}
#box{
margin: 30px auto;
width: 600px;
height:300px;
border:1px solid #000;
display:table-cell;
vertical-align:middle;
text-align:center;
}
p{
}
すると次のような表示になります。
vertical-alignは
インライン要素かtable-cellしかききません！
marginが効かなくなり、左上にボックスが配置されますが、文字が上下中央に揃います。
適宜ボックス等をmargin,padding,borderを使って動かないよう固定化し、上下中央を行ってください。
@charset "utf-8";
/* CSS Document */
#wrapper{
margin: 10px auto;
padding:20px;
width: 800px;
height:400px;
border: 1px solid #000;
}
#box{
margin: 30px auto;
width: 600px;
height:300px;
border:1px solid #000;
position:relative;
}
p{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin: auto;
width:200px;
height:100px;
background: #888;
}
このようになりました。
ブロック要素のほうは多少コードが増えてめんどくさいですが、これでも上下中央にすることができます。
上下中央にさせるときにブロックか文章かを考えておくと切り分けが楽になると思います。
以上
