divタグを使って中央に表示させる方法

divタグを使うことで、タグで囲ったものを中央に表示させることができます。

divタグはそれだけでは特に意味を持たないタグです。
このタグで囲ったものは一つのかたまりとして位置を変えたりすることができます。

divタグ内でalign属性を使い、位置をcenterに指定します。

<div align="center">中央に表示させるもの</div>

divタグで囲っていないものとdivタグで囲って中央に表示するようにしたものを比較してみます。

・divタグを使わない場合

中央に表示させるもの

・divタグを使って中央に表示させた場合

中央に表示させるもの

divタグで囲ったものはひとかたまりとなるので、まとめて中央に表示されます。
書き方と表示された例

<div align="center">
<p>中央に表示</p>
<p>中央に表示</p>
<p>中央に表示</p>
</div>

中央に表示

テキスト以外のものもdivタグで囲って同じように中央に表示させることができます。
tableタグで作った表を中央に表示させてみました。

・divタグを使うことで中央に表示させることができる。
・まとめて中央に表示させることもできる。
・テキスト以外のものも中央に表示させることができる。

関連記事
www.hibinokoto01.com
www.hibinokoto01.com