日々のこと

HTMLやCSSのことも書いています。

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

スポンサーリンク

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

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

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タグで作った表を中央に表示させてみました。


見出し1 見出し2 見出し3
テキスト1 テキスト2 テキスト3
テキスト4 テキスト5 テキスト6
テキスト7 テキスト8 テキスト9

まとめ

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

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