【web】左右中央揃えにする方法
こんにちは、夏フェス参戦よりも仕事を選んだことを死ぬほど後悔しているつちだにんじんです。
今回は左右中央揃えにする方法をいくつか書こうと思います。
web制作していると、どうしても中央揃えにしないといけない場面が多々ありますよね・・・。
でもうまくいかないこともしばしば・・・。
そんな時のためにいくつか方法を試せるように、ここにメモを残しておきます。
「数打てばどれか当たるだろ戦法」です。
左右（水平方向）に中央揃え
左右中央揃えはめちゃくちゃよく使うものだと思います。
（でもうまくCSSが効いてくれないことも多いんですよね・・・）
text-align
まずはお馴染みのtext-alignプロパティです。
基本的には「text-align: center;」の一文で左右中央揃えになるのですが、何にでも効いてくれるわけではありません。
text-align: center;は、インライン要素には効いてくれません。
<span class="inline">インライン要素</span>
<div class="block">ブロック要素</div>
<div class="block_50">５０％のブロック要素</div>/* インライン要素 */
.inline{
text-align: center;
background: #ccedfc;
}
/* ブロック要素 */
.block{
text-align: center;
background: #fcdbcc;
}
/* ５０％のブロック要素 */
.block_50{
text-align: center;
background: #ccfcdb;
width: 50%;
}code-penではインライン要素、ブロック要素、幅を50％に指定したブロック要素それぞれにtext-alignを指定しています。
出力結果はこうです。
インライン要素には効いていませんね。
因みに要素それぞれに色をつけたのは、その要素の箱がどうあるかが可視化できるようにです。
text-alignでは要素の箱の中での左右中央揃えにされるので、横幅の指定のできないインライン要素では効きません。
インライン要素にtext-align: center;を効かせたいなら、display: block;を指定してブロック要素に変身させてあげてください。
margin
次はmarginを指定して左右中央揃えにする方法です。
コレもど定番の方法です。
方法としては、「margin: 0 auto;」を指定します。
これは上下のマージンは０、左右のマージンはautoにするものです。
<span class="inline">インライン要素</span>
<div class="block">ブロック要素</div>
<div class="block_50">ブロック要素５０％</div>
<div class="block_50_center">ブロック要素５０％</div>/* インライン要素 */
.inline{
margin: 0 auto;
background: #ccedfc;
}
/* ブロック要素 */
.block{
margin: 0 auto;
background: #fcdbcc;
}
/* ブロック要素５０％ */
.block_50{
margin: 0 auto;
background: #ccfcdb;
width: 50%;
}
/* ブロック要素５０％ 中央揃え */
.block_50_center{
margin: 0 auto;
background: #ccfcdb;
width: 50%;
text-align: center;
}これもインライン要素、ブロック要素での出力結果を表示していますが、やはりインライン要素には効いていません。
そして横幅100％になっているブロック要素も見た目は変わりません。
マージンは要素の外側の余白設定なので、100％幅の要素だと余白が設けられないんです。
そのため、50％に幅を指定したブロック要素は真ん中にできました。
でもこれはブロック要素の箱を中央揃えにしたわけで、その中にある要素は左にいます。
なので４つ目の要素のように、margin: 0 auto; と text-align: center;両方を指定する必要があります。
ちなみに補足ですが、「margin: 0 0 0 auto;」で右揃え、「margin: 0 auto 0 0;」で左揃えにすることができます。
margin-inline
これはmargin: 0 auto;と似たようなもので補足として書きますが、「margin-inline: auto;」を指定しても左右中央揃えにできます。
これは何なのかというと、インライン方向（水平方向）のマージンを指定ができるもので、値を「auto」にすることでmargin: 0 auto;と同じような結果が出ます。
justify-content
今度は「justify-content: center;」を使用しての左右中央揃えです。
justify-contentは「display: flex;」を指定して要素をflex要素に変えないと指定できません。
<span class="inline">インライン要素</span>
<div class="block">ブロック要素</div>
<div class="block_50">ブロック要素５０％</div>
<div class="block_50_center">ブロック要素５０％</div>/* インライン要素 */
.inline{
background: #ccedfc;
display: flex;
justify-content: center;
}
/* ブロック要素 */
.block{
background: #fcdbcc;
display: flex;
justify-content: center;
}
/* ブロック要素５０％ /
.block_50{
background: #ccfcdb;
width: 50%;
display: flex;
justify-content: center;
}
/* ブロック要素５０％ 中央揃え */
.block_50_center{
background: #ccfcdb;
width: 50%;
display: flex;
justify-content: center;
margin: 0 auto;
}
この方法はインライン要素であっても、flex要素に変換するため問題なく使えます。
インライン要素でもブロック要素でも同じ出力結果になります。
justify-contentはflex要素の水平方向のレイアウトを指定するものです。
flexについては詳しくは過去記事をご参考に↓
position
次はpositionを使用した左右中央揃えです。
私は最終手段で使いますが、基本あまり使いたくない派です・・・。
<div class="wrap">
<span class="content">にんじんしりしり</span>
</div>
<div class="wrap_2">
<span class="content_2">高麗にんじん</span>
</div>.wrap{
position: relative;
width: 50%;
height: 300px;
background: #fab3ae;
}
.wrap .content{
position: absolute;
width: fit-content;
margin: 0 auto;
left: 0;
right: 0;
font-size: 1.5em;
}
/* 要素も真ん中 */
.wrap_2{
position: relative;
width: 50%;
height: 300px;
background: #b7e2c5;
margin: 0 auto; /* 親要素を真ん中に配置するため */
}
.content_2{
position: absolute;
width: fit-content;
margin: 0 auto;
left: 0;
right: 0;
font-size: 1.5em;
}
出力結果はこうです。
テキストのspan要素をposition: absolute;で中央揃えにしているものと、親要素も中央揃えにしているものの2パターンです。
親要素（この場合は.wrapと.wrap_2）にposition: relative;を指定してレイアウトの基準にします。
子要素（この場合は.contentと.content_2）にposition: absolute;を指定して、親要素の中でどの位置に配置するかを決めています。
今回は左右中央に配置するため、「left: 0;」「right: 0;「margin: 0 auto;」の３つを指定しています。
この３つを子要素に指定することで、真ん中に配置ができます。
以上です！
次回は水平方向に中央揃えできる方法を書けたらと思っています。
私のHPです。
webやグラフィックデザイン、イラスト制作などのお仕事がありましたら、ぜひこちらからお気軽にお問合せください！