CSSで中央寄せ、左寄せ、右寄せ

この記事ではコンテンツを整列させる方法について学んでいきましょう。

この記事では、整列において最も基本となるプロパティ、marginとtext-alignをつかった中央寄せ・左寄せ・右寄せについて解説していきます。要素によって使用するプロパティが異なりますので、それぞれについて詳しく解説しています。

ブロック要素の整列

ブロック要素の幅はデフォルトで親要素の幅と同等になります。ここで紹介する手法は幅が親要素よりも小さいブロック要素に適用されます。

以下にブロック要素としているHTMLタグを記載します。

<address>　<article>　<aside>　<blockquote>　<details>　<dialog>　<dd>
<div>　<dl>　<dt>　<fieldset>　<figcaption>　<figure>　<footer>　<form>　
<h1>~<h6>　<header>　<hgroup>　<hr>　<li>　<main>　<nav>　<ol>　
<p>　<pre>　<section>　<table>　<ul>

例題で使用するHTMLを記載します。

<div class="parent">
  <div class="square">01</div>
</div>

上記のような要素を整列する場合はクラス“square”の要素に対して、marginプロパティを使用します。

center{
 margin-left:auto;
}

左寄せ margin-rightプロパティ

左寄せにはmargin-rightプロパティを使用して、左寄せを行います。

left{
 margin-right:auto;
}

右寄せ margin-leftプロパティ

右寄せにはmargin-leftプロパティを使用して、右寄せを行います。

left{
 margin-left:auto;
}

中央寄せ

中央寄せには上記で紹介した両方のプロパティを使用します。

center{
 margin-right:auto;
 margin-left:auto;
}

省略型のmarginプロパティを使用しても中央寄せが可能です。

center{
　margin:0 auto;
}

インライン要素の整列

インライン要素の整列には、直上の親要素に対してtext-alignプロパティを使用します。例題の親要素であるクラス”parent”に対して、text-alignを使用します。

<div class="parent">
  <div class="square">01</div>
</div>

center{
 margin-left:auto;
}

左寄せ text-align:left

左に寄せたいコンテンツの親要素に対して、text-align:leftを適用することで左寄せにすることができます。

left{
  text-align:left;
}

右寄せ text-align:right

右に寄せたいコンテンツの親要素に対して、text-align:rightを適用することで左寄せにすることができます。

right{
  text-align:right;
}

中央寄せ text-align:center

中央に寄せたいコンテンツの親要素に対して、text-align:rightを適用することで左寄せにすることができます。

center{
  text-align:center;
}

困ったら試してみよう

CSSを習い始めたときは、ブロック要素なのかインライン要素なのかどちらかわからないということが多いかと思います。迷ったときはmarignとtext-alignのどちらが効くのかをまずは試してみて、要素の特性を覚えていくのもいいでしょう。

コンテンツの整列は、CSSでレイアウトを組んでいくうえで必ずと言っていいほど使用します。marginプロパティとtext-alignプロパティは必ず覚えましょう。