コンテンツを横方向の真ん中に配置するのは、
縦方向に比べると、
比較的、簡単に指定することができる。

横方向の配置指定には、
万能な「text-align」プロパティがあるので、
あまり困ることがない。

ただし、コンテンツの横サイズが指定されていないと、
適用されないこともある。
横サイズが指定されていないと、
計算ができない様子。

コンテンツのオリジナルサイズが大きすぎると、
センタリングの意味がないので、
親要素より小さいサイズであることも必要。

INDEX

■ 「text-align: center」で、コンテンツの横位置を真ん中にする方法
■ 「margin: 0 auto」で自動的にセンタリングする方法
■ 「margin」でサイズ指定して横位置を真ん中にする方法

「text-align: center」で、コンテンツの横位置を真ん中にする方法

横位置の場合、
真ん中にコンテンツを配置するのは、
「text-align: center」で簡単に指示が可能。

「文字列」「画像」「ブロック要素」など、
ほとんどのコンテンツに指示が可能なので、
便利なプロパティです。
もちろん、「左右」に寄せる指示も可能です。

「text-align」プロパティの指定方法

text-align: center;
text-align: left;
text-align: right;

「text-align」プロパティに指定できる値

値	説明
start	文字列の書字方向に従うという意味の値。書字方向が「左書き」の場合は「left」、「右書き」の場合は「right」と同じ。
end	文字列の書字方向に従い逆方向に指定するという意味の値。書字方向が「左書き」の場合は「right」、「右書き」の場合は「left」と同じ。
left	「左側」に寄せるという意味の値。
right	「右側」に寄せるという意味の値。
center	「中央」に配置するという意味の値。
justify	「両端揃え」という意味の値。文字の両端が、表示位置の両端に配置されるように、自動的に間隔が加えられる。最終行には適用されない。
justify-all	「justify」と同じ意味だが、「最終行」も強制的に「両端揃え」させる。
match-parent	親要素の指定を検証し、適切な「left」「right」に置き換える。「inherit」に似ているが、親要素の継承ルールが少し異なる様子。
inherit	親要素の指定を継承するという意味。指定がされていなかった場合は、デフォルトの「left」になる。
initial	プロパティの初期値「left」が適用される。
unset	プロパティをリセットする値。リセットした場合、親要素の指定を継承するが、指定がない場合は、デフォルトの「left」が適用される。
revert	ユーザーエージェントのstyleを適用する値。

Back

「margin: 0 auto」で自動的にセンタリングする方法

「margin」プロパティは、
数字で指定して、コンテンツをセンタリングすることができますが、
「画像」「ブロック要素」などだけですが、
「auto」という値を指定して、
自動設定のようにセンタリングすることも可能。

ただ、
「横サイズ」を指定して明確化されていないと、
自動で、センタリングしてくれない。

「インライン要素」には、「display: block」を追加することで、
「ブロック要素」へ変換し、適用することも可能。

「margin」プロパティでのセンタリングするサンプルコードと書式

width: 100px;
margin: 0 auto;

display: block;

margin: 上右下左;
margin: 上左右下;
margin: 上下左右;
margin: 上下左右;

Back

「margin」でサイズ指定して横位置を真ん中にする方法

「margin」プロパティで、
サイズ指定をすることで、
横位置を真ん中あたりに指定することが可能。

「margin」プロパティは、

margin: 上右下左;
margin: 上左右下;
margin: 上下左右;
margin: 上下左右;

margin: 3px 3px 3px 3px;
margin: 3px 3px 3px;
margin: 3px 3px;
margin: 3px;

というように指定することができる。
「左」の部分に、値を記述することで、
コンテンツの左部分に、スペースを入れることができる。

コンテンツが、横方向の真ん中になる位置を計算して入力します。

Back