レイアウトで中央寄せをする方法に「text-align: center;」と「margin: 0 auto;」がありますが、要素がブロックレベルなのか、インラインなのかによって設定方法が若干異なります。
<h1>、<p>、<div>などはブロックレベル、
<span>、<a>、<img>などはインラインです。
それぞれの設定方法を説明しながら「margin: 0 auto;」と「text-align: center;」 の違いについてもみていこうと思います。
Androidアプリを作成しました。
感情用のメモ帳です。
ブロックレベルの要素を中央に
CSSのプロパティ「text-align」をcenterにすると、要素の中身を中央揃えにします。
わかりやすいように<p>に枠線を表示して例示します。
html
<p>テキストはデフォルトです。<p>
<p class="my-text">テキストがセンターです。</p>css
p, .my-text {
border: 1px solid red;
}
.my-text {
text-align: center;
}テキストはデフォルトです
テキストがセンターです。
ブロックレベルの要素は、デフォルトで親要素の横幅いっぱいに広がるため、位置を動かすことはできません。
「text-align: center;」は、
要素そのものの配置を変えたのではなく、要素の中身を中央寄せするものです。
要素そのものを中央に配置するには、まず横幅を設定する必要があります。
例えば、大きな羊羹がひとつあって、箱にピッタリ収まっている場面を想像してみてください。
羊羹は箱の真ん中に収まっている、とは言いにくいですよね。箱と羊羹の大きさに差があって位置が決められるわけです。
widthで要素の横幅を設定し、marginを「0 auto」にすることで親要素の中心に配置します。
html
<p>ここがセンターです。</p>css
p {
border: 1px solid red;
width: 200px;
margin: 0 auto;
}ここがセンターです。
widthを設定することで動かせるようになり、要素自体を中央揃えにすることができました。
「margin: 0 auto;」は、
要素そのものを親の中心に配置するものです。
インライン要素を中央に配置する
インライン要素は現在の行に水平方向に配置されます。設定しなければ「text-align: center;」や「margin: 0 auto;」は効きません。「text-align: center;」や「margin: 0 auto;」は、ブロックレベルの要素に対して行うものだからです。
二通りのやり方があります。
- <p>や<div>の子にインライン要素を置いて、「text-align: center;」
- 「display: block;」にして「margin: 0 auto;」をかける
text-align: center;
インライン要素はそのままでは「text-align: center;」は効きません。<p>や<div>の子要素にして、親要素の方にtext-alignを設定します。
例としてリンクを作成します。
<p>の子に<a>を置きます。
html
<p><a href="#">このページのトップへ</a><p>css
p {
text-align: center;
}margin: 0 auto;
マージンで中央寄せをするには、「display: block;」でインライン要素をブロックレベルの要素として表示させます。
さらにwidthで横幅を決め、「margin: 0 auto;」をかけます。
html
<a href="#">このページのトップへ</a>css
a {
display: block;
width: 300px;
margin: 15px auto;
border: 1px solid red;
}※今回は上下のmarginを15pxにしています。
今回<a>を使って説明していますが、その注意点としてwidthを設定すると、その長さ分クリックできるところが設定されてしまうことです。
下のリンクは文字列より長めにwidthを設定しています。枠線を表示していますが、マウスを近づけると、文字の右側の部分でもカーソルが変化することが見てとれると思います。
このページのトップへ適切な長さにwidthを設定するか、ボタンリンクにするなどの必要があります。中央寄せをするだけなら、text-alignを使う方が簡単かなと思います。
適切な長さにしたリンク
このページのトップへまとめ
中央寄せの方法について解説しました。
「text-align: center;」はブロックレベルの要素の中身に対してかけるもの
「margin: 0 auto;」はブロックレベルの要素そのものを中心に配置するもの
「margin: 0 auto;」を設定する際は「width」を一緒に決める
インライン要素の場合は、ブロックレベルの親に「text-align: center;」をかけるか、「display: block;」、「width」、「margin: 0 auto;」の３つを設定する
このページが少しでもお役に立てたのなら幸いです。