【HTML/CSS】テキストや画像、＜div＞＜/div＞を中央揃えや左揃えにする方法（text-align、margin）

テキストや画像、＜div＞＜/div＞を中央揃えにしたい！

HTMLコーディングにしろ、WordPressでのサイト構築にしろ、文章や画像を中央や左右に揃えたい場面は常にあります。

中央に配置したdivタグの中の文字を左揃えで配置したい！とか、text-alignじゃ中央揃えで配置できないよ！？とか、レイアウトで思い悩む初心者も多いはず。 基礎から勉強した人には当たり前の知識でも、「実践あるのみ！」、「細かいことは良いから、やり方だけ教えてよ！」な人にはありがちな、知識の偏りや盲点を補えるかも？

方法

中央や左右に揃えるための方法は、ブロックレベル要素とインライン要素では異なることに注意してください。

１．インライン要素の揃え　text-align: center;

最も簡単な、ブロックレベル要素の中身のテキストや画像などのインライン要素を中央揃えにする方法です。

<div Class="example">
 <p> text-align: center;で中央揃え</p>
</div>

.example{ text-align: center; }

２．ブロックレベル要素の揃え　margin: 0 auto;　width: (50%);

次に馴染みのあるのが、ブロックレベル要素を中央揃えにする方法。

margin（外余白）を上下0、左右auto（自動）に指定する記述です。

widthの指定も忘れずに。

<div Class="example">
 <p>margin: 0 auto;<br />width: (50%);で中央揃え</p>
</div>

.example {
 margin: 0 auto;
 width: 50%;
}

３．１と２の違い

１は、ブロックレベル要素の揃え指定がないため、デフォルトの左寄せになっています。

その左寄せのブロックレベル要素の中身が、「text-align」で中央揃えになっています。

２は、ブロックレベル要素が「margin」で上下0、左右autoに指定されているため中央揃えになり、中身のインライン要素の揃え指定がないため、デフォルトの左寄せになっています。

２の中身のインライン要素も中央揃えにしたい場合は、

<div Class="example">
 <p>margin: 0 auto;<br />width: (50%);<br />text-align: center;で中央揃え</p>
</div>

.example {
 margin: 0 auto;
 width: 50%;
}
.example p {
 text-align: center;
}

となります。

３．左揃えのテキストが入ったブロックを右寄せにしたいーwidth,marginー

また、左揃えのテキストが入ったブロックを右寄せにしたい場合は、ちょっとややこしいです。

.example-outer {
 width: 100%;
}
.example-inner {
 width: 50%;
 margin-left: 50%;
 margin-right: 0%;
}

外側のブロックレベル要素で表示域100％を確保し、内側のブロックレベル要素の幅と余白を％で指定しました。

例では幅50％のブロックを、左側に余白50％を取り、幅100％のブロック中に表示しています。

他の記述方法や、より簡素な記述方法もありますが、レイアウト（揃え）指定で注意するべきは「ブロックレベル要素」なのか、「インライン要素」なのかを整理して考えることです。

[ad_tag id=”1836″]

まとめ

いかがでしょうか？

サイトのデザインをデザイナーさんが担当する場合は、可能な限りデザイン案に忠実に仕上げてあげたいものです。

コーディング担当としては、いかにデザイナーの希望通りに仕上げられるかが腕の見せ所ではないでしょうか？

SEO対策やUI/UX観点からの逆提案はあっても然るべきでしょうが、ブロックレベル要素やインライン要素のレイアウトを、変幻自在に操れれば、サイトの魅力もアップすることでしょう。

[ad_tag id=”1839″]