CSSのテキストの縦方向のセンタリングは簡単にできそうで難しい。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>縦方向のセンタリング</title>
<meta charset="UTF-8" />
<style>
body {
height:250px;
}
.va {
margin:auto;
display:block;
width:200px;
height:200px;
text-align:center;
vertical-align:middle;
word-break: normal;
background:pink;
}
</style>
</head>
<body>
<div class="va">縦方向のセンタリング縦方向のセンタリング縦方向のセンタリング縦方向のセンタリング縦方向のセンタリング縦方向のセンタリング</div>
</body>
</html>
結果:
私としてはvertical-align:middleで縦方向のセンタリングを実施しているつもりでいるが、実際はそうならない。これはvertical-alignが「行ボックスにおける縦方向のセンタリング」を行うからである。
これをどうにかできないか考えた。アイデアとしては表示したい文字列の前にボックスの高さと同じインラインボックスを配置し、文字列をインラインに配置するというものである。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>縦方向のセンタリング</title>
<meta charset="UTF-8" />
<style>
body {
height:250px;
}
.content {
display: inline-block;
vertical-align:middle;
text-align:center;
}
.box {
display:inline-block;
margin:auto;
width:200px;
height:200px;
word-break: normal;
background:pink;
text-align: center;
}
.pad {
margin: 0;
display:inline-block;
vertical-align:middle;
height:100%;
width:0;
}
</style>
</head>
<body>
<h3>inline-blockによる方法</h3>
<div class="box"><span class="pad"></span><span class="content">縦方向のセンタリング縦方向のセンタリング縦方向のセンタリング縦方向のセンタリング縦方向のセンタリング縦方向のセンタリング</span></div>
</body>
</html>
結果：
またdisplay:table-cell;を指定する方法もあるそうだ。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>縦方向のセンタリング</title>
<meta charset="UTF-8" />
<style>
body {
height:250px;
}
.va {
display:table-cell;
margin:auto;
width:200px;
height:200px;
text-align:center;
vertical-align:middle;
word-break: normal;
background:pink;
}
</style>
</head>
<body>
<div class="va">縦方向のセンタリング縦方向のセンタリング縦方向のセンタリング縦方向のセンタリング縦方向のセンタリング縦方向のセンタリング</div>
</body>
</html>
結果:
うーむ。縦方向のセンタリングはややこしいね。。こういう属性があってもいいと思うのだが、不思議だ。。