ホームページを作っている時に、なかなか厄介なセンタリングの技は、いくつか存在します。
横センタリングと縦センタリングは、CSSでは全く考え方を変えなければイケない場合もあるんですよね。
テキストと画像、その他の要素など、それぞれタイプの違うモノをセンタリングさせる時など、一体どうやればいいのか分からないという人のために、そのパターンを解説してみたいと思います。
単純な縦と横のセンタリング
text-align
サンプルです。
<div class='sample-1'>
サンプルです。<br>
<div class='box'></div>
</div>
<style>
.sample-1{
text-align:center;
border:1px solid black;
padding:10px;
}
.sample-1 .box{
width:50px;
height:50px;
background-color:red;
}
</style>
最も簡易なセンタリングの、text-align、文字通り、テキストの寄せ方向の指定ですが、テキストというよりもinline系の要素に対して有効なので、divなどのblock要素に対しては適用されません。
適用範囲としては、display:inline-blockや、画像タグなどです。
verticle-align
| A | B | C |
<table class='sample-2'>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</table>
<style>
.sample-2{
height:80px;
border-collapse:separate;
}
.sample-2 tr td{
border:1px solid black;
padding:10px;
width:80px;
text-align:center;
}
.sample-2 tr td:nth-of-type(1){
vertical-align:top;
}
.sample-2 tr td:nth-of-type(2){
vertical-align:middle;
}
.sample-2 tr td:nth-of-type(3){
vertical-align:bottom;
}
</style>
縦の寄せをコントロールできるっぽいネーミングですが、この命令はTableタグのセルに対してしか有効になりません。
通常のブロック要素に適用しても効かないので、次のようにやっているケースも良く見かけます。
通常
display:table-cell
<div class='sample-3'>
<div class='block'>通常</div>
<div class='cell'>display:table-cell</div>
</div>
<style>
.sample-3{
display:table;
border-collapse:separate;
}
.sample-3 .block,
.sample-3 .cell{
border:1px solid black;
width:120px;
height:100px;
text-align:center;
vertical-align:middle;
}
.sample-3 .block{
display:inline-block;
}
.sample-3 .cell{
display:table-cell;
}
</style>
この、display:table-cellにセットする場合、いくつか使いづらいポイントがあります。
1. 親要素に、display:tableがセットされていないとセルとして機能しない。 2. 兄弟要素もセル要素にしないと表示コントロールが調節しずらい。
Flexを使ったセンタリング
単一の要素の中であれば、比較的かんたんに縦横のセンタリングが実装できます。- A
- B
- C
Transformを使ったセンタリング
もっとも扱いやすいのが、transformを使ったセンタリングでしょう。 これは、特定の要素の塊を好きな要素の中心に配置することが可能になります。表示したい
内容
内容
<div class='sample-5'>
<div>表示したい<br>内容</div>
</div>
<style>
.sample-5{
width:300px;
height:300px;
border:1px solid black;
position:relative;
}
.sample-5 > div{
padding:10px;
border:1px solid red;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
</style>
中心に置きたい親要素に、position:relative;をセットして、
中心配置したい要素に、position:absolute;をセットすると土台の完成です。
あとは、
top:50%; left:50%; transform:translate(-50%,-50%);この命令で、横、縦を50%移動して、要素の表示サイズ分、-50%ずらしてくれます。 これが便利なのは、要素のサイズが動的に変更しても対応してくれるというのが嬉しいポイントで、計算などは一切しなくてもいいので、非常に使いやすいです。
