「CSSで文字やテキストを上下中央の中心揃えにする方法」の編集履歴（バックアップ）一覧はこちら
追加された行は緑色になります。
削除された行は赤色になります。
CSSで文字やテキストを上下中央の中心揃えにする方法について書いていきます。6月20日記事
イメージ
~
インライン要素を中央に
~
ブロック要素を中央に
~
~
目次
#contents
~
~
----
~
*このサンプルコードをいじっていきます。
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が効いています。
※[[]]を参照
~
~
*インライン要素を中央揃えしてみる。
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は&color(red){インライン要素かtable-cellしかききません！}
~
&color(red){marginが効かなくなり、左上にボックスが配置されますが、文字が上下中央に揃います。}適宜ボックス等をmargin,padding,borderを使って動かないよう固定化し、上下中央を行ってください。
~
~
*ブロック要素の方も試してみる。
#boxにposition:relativeを追加し、p要素の方にブロックを中央にさせるコードを記載していく。
@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;
}
このようになりました。 ブロック要素のほうは多少コードが増えてめんどくさいですが、これでも上下中央にすることができます。
CSSで文字やテキストを上下中央の中心揃えにする方法について書いていきます。6月20日記事
イメージ
~
インライン要素を中央に
#image(width=500,002.png)
ブロック要素を中央に
#image(width=500,003.png)
~
~
目次
#contents
~
~
----
~
*このサンプルコードをいじっていきます。
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{
}
すると次のような表示になります。
#image(width=500,001.png)
paddingを設定しているため、#boxのmargin-topが効いています。
※[[]]を参照
~
~
*インライン要素を中央揃えしてみる。
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{
}
すると次のような表示になります。
#image(width=500,002.png)
vertical-alignは&color(red){インライン要素かtable-cellしかききません！}
~
&color(red){marginが効かなくなり、左上にボックスが配置されますが、文字が上下中央に揃います。}適宜ボックス等をmargin,padding,borderを使って動かないよう固定化し、上下中央を行ってください。
~
~
*ブロック要素の方も試してみる。
#boxにposition:relativeを追加し、p要素の方にブロックを中央にさせるコードを記載していく。
@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;
}
このようになりました。
#image(width=500,003.png)
ブロック要素のほうは多少コードが増えてめんどくさいですが、これでも上下中央にすることができます。
上下中央にさせるときにブロックか文章かを考えておくと切り分けが楽になると思います。
~
~
以上
