【CSS】様々な要素を中央揃えにする方法
久しぶりにCSSの記事です。CSS初心者の時につまずいた要素の中央揃えについてまとめておきたいと思います。
※本ページは広告・アフィリエイトプログラムにより収益を得ています。
デモ
まずは全パターンのデモページをご確認下さい。
次にそれぞれの要素について説明いたします。
01.画像やテキストの中央揃え
<div id="center01">
<p><img src="http://placekitten.com/600/240" /></p>
<p>画像やテキストを中央揃え</p>
</div><!-- / #center01 -->
#center01 {
text-align:center;
}
text-align:center;は最も一般的な中央揃えです。テキストや画像などのインライン要素をを中央揃えにする方法です。
#center01 p {
max-width:600px; /* 要素の幅を指定する（固定幅ならwidth:600px;） */
margin:0 auto; /* ブロック要素の中央揃え */
}
ブロック要素の場合はmargin:0 auto;を使用します。こちらは「ブラウザの幅から要素の幅を引いた値を左右均等に余白を空ける」といった意味があるので、要素の幅を一緒に指定します。
02.positionを使って天地中央に要素を揃える
<div id="center02">
<div class="inner">
<p>天地中央（position）<br>
天地中央（position）<br>
天地中央（position）</p>
<!-- / .inner --></div>
<!-- / #center02 --></div>
#center02 {
position:relative; /* 絶対配置の基準点 */
width:100%; /* 600px以下は幅いっぱいに広げる */
max-width:600px; /* 最大幅の指定 */
height:300px; /* 高さの指定 */
margin:0 auto; /* ブロック要素の中央揃え */
text-align:center; /* インライン要素の中央揃え */
background:#fff; /* 背景色 */
}
#center02 .inner {
position:absolute; /* 絶対配置 */
top:50%; /* 上から半分 */
left:50%; /* 左から半分 */
width:100%; /* 大枠と同じ幅に */
margin:-1.5em 0 0 -50%; /* 要素の大きさの半分引く */
}
大枠は要素の幅と高さを指定して中央揃えにしているだけです。.innerを絶対配置にするために「position:relative;」で大枠を基準点にします。
.innerを絶対配置にし、大枠から上と左に50%の位置で配置してみました。するとテキストが中央からずれています。
なぜなら絶対配置は.innerの左上を基準にしているためです。
これを回避するには「子要素の大きさの半分をmarginで引く」方法があります。
今回の場合は.innerが大枠と同じ幅に広げていたので、半分の幅の-50%を指定します。高さについてはテキストが3行あるので半分の高さの-1.5em（1.5文字分）を指定します。
.innerの要素が固定幅の要素であれば、幅と高さの半分をネガティブマージンで引きます。
IE8以下を切り捨てるならCSS3で対応することも出来ます。
#center02 .inner {
position:absolute; /* 絶対配置 */
top:50%; /* 上から半分 */
left:50%; /* 左から半分 */
width:100%; /* 大枠と同じ幅に */
/* 要素の大きさの半分引く（CSS3） */
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
この場合は要素の幅や行数が可変になったとしても常に中央に揃ってくれます。
03.table-cellを使って天地中央に要素を揃える
見た目は02のposition配置とほぼ同じですが、こちらは「display:table-cell;」を使用して天地中央に配置しています。
<div id="center03">
<p>天地中央（table-cell）<br>
天地中央（table-cell）<br>
天地中央（table-cell）</p>
</div><!-- / #center03 -->
#center03 {
display:table; /* 要素をテーブルのようにする */
width:100%;
max-width:600px;
height:300px;
margin:0 auto;
background:#fff;
}
#center03 p {
display:table-cell; /* 要素をテーブルのようにする */
text-align:center; /* インライン要素の中央揃え */
vertical-align:middle; /* 天地中央に揃える */
}
親要素に「display:table;」と子要素に「display:table-cell;」を指定することで、要素をテーブルのように扱うことが出来ます。
IE8以上対応となっており、古いブラウザを切り捨てればスマホサイトなどでも便利に使えるプロパティです。
【備忘録】スマホサイトのコーディング例 | Creator Clip
こちらも要素の幅や高さに依存せずに天地中央揃えにすることが出来ます。
04.ソーシャルボタンなどのリストを中央に揃える
ブログなどを設置したら必ずと言っていいほどソーシャルボタンの設置をする機会があると思います。そんなときに使えるリストを中央揃えにするテクニックです。結構有名かもしれません…。
幅が決まっていない要素に対しても使用することが出来るので何かと便利ですね！
<div id="center04">
<div id="social01" class="clearfix">
<p>ソーシャルボタン（吹き出し横）</p>
<ul class="clearfix">
<li>ツイートボタン</li>
<li>いいね！ボタン</li>
<li>はてなブックマークボタン</li>
<li>+1ボタン</li>
<li>LINEで送るボタン</li>
<li>pocketボタン</li>
</ul>
<!-- / #social01 .clearfix --></div>
<div id="social02" class="clearfix">
<p>ソーシャルボタン（吹き出し縦）</p>
<ul class="clearfix">
<li>ツイートボタン</li>
<li>いいね！ボタン</li>
<li>はてなブックマークボタン</li>
<li>+1ボタン</li>
<li>LINEで送るボタン</li>
<li>pocketボタン</li>
</ul>
<!-- / #social02 .clearfix --></div>
<!-- / #center04 --></div>
#center04 {
margin:0 1em;
}
#center04 p {
margin:1em 0;
text-align:center;
}
#center04 ul {
position:relative; /* 相対配置 */
left:50%; /* ボタン全体を中央によせる */
float:left; /* floatでリストを浮遊させる */
}
#center04 li {
position:relative; /* 相対配置 */
left:-50%; /* ボタンの幅の半分だけ左に寄せる */
float:left; /* ボタン同士を回りこませる */
margin-left:1em; /* ボタン同士の余白 */
line-height:0; /* いいね！ボタンのズレ防止 */
}
#center04 #social02 li {
height:63px; /* 吹き出し（縦）ボタンの回り込み用 */
}
#center04 li:first-child {
margin-left:0; /* 最初のボタンは左マージンなし */
}
/* ボタンの幅指定 */
#twitter-widget-0, #pocket-button-0 {
max-width:88px;
}
#___plusone_0 {
max-width:66px;
}
/* タブレット向け（3カラム） */
@media screen and (max-width: 620px){
#center04 li {
width:32%;
margin:0 0 1em 2%;
}
#center04 li:nth-child(4) {
margin-left:0;
}
}
/* スマホ向け（2カラム・3カラム） */
@media screen and (max-width: 480px){
#center04 #social01 li {
width:49%;
margin:0 0 1em 1%;
}
#center04 #social01 li:nth-child(odd) {
margin-left:0;
}
#center04 #social01 li:nth-child(4) {
margin-left:1%;
}
}
CSS記述が増えて複雑そうに見えますが、02.position配置と同じようなことをしているだけです。
ソーシャルボタンを囲っているulを「position:relative;」と「left:50%;」で左から50%の配置に移動します。このときfloatで浮遊させないと移動してくれません。
この方法だとulが正しい位置にいないので背景などを指定するときは<ul>を<div>などで囲む必要があります。今回は#social01というidを割り振って囲ってみました。
floatを使用しているので#social01と<ul>に対してclearfixを指定するのを忘れずに。
そして子要素の<li>にもfloatを掛けてボタン同士を回りこませ、さらに「position:relative;」と「left:-50%;」でボタン幅の半分だけ後ろに移動するように指定しています。
下のメディアクエリはタブレットやスマホ向けに指定しています。スマホで見た時はソーシャルボタンが押しづらくなってしまうので、3カラム・2カラムに変更して表示するようにしています。
参考
floatで並べたリストのセンタリング – Weblog – Hail2u.net
おまけ：ボタンの設置コード取得
リストの中に入るソーシャルボタンは以下のページから作成することが出来ます。
Twitter | ツイートボタン
Facebook | いいね！ボタン
はてなブックマーク | はてなブックマークボタン
はてなブックマークボタンの作成・設置について – はてなブックマーク
はてなブックマークボタン …
Google+ | +1ボタン
+1 ボタン – Google+ Platform — Google Developers
LINE | LINEで送るボタン
Pocket | Pocket Button
Pocket for Publishers: Pocket Button
最後に
こういったCSSの配置テクニックは覚えているときっとどこかで役に立つと思います。自分は覚えてもすぐに忘れてもう一度ググって探していたので、備忘録としてまとめておきました。
最後のソーシャルボタンの配置は、初めて知ったときに感動すら覚えました…ｗこれは考え付かないです。
また何か思いついたら共有したいと思います～。
