creatersnest126

Div要素をセンタリングさせる方法と上手くいかない時の解決法


HTMLのコーディングでは欠かせない要素にDIV要素があります。
DIV要素はブロック要素として、スタイルシートやJavaScriptで装飾するのに
用いられます。

今回はDIV要素をセンタリングする方法と、うまくいかない時の解決法を紹介します。
HTMLをコーディングしていてうまくいかない場合の参考にしてください。

 

DIV要素のセンタリング

<div>要素をセンタリングするには、aling属性を使用するか
スタイルシートでmarginを設定する必要があります。

 

aling属性を使用する

aling属性を「center」に指定することでセンタリングできます。

div_align

aling属性には以下の種類があります

center:中央寄せ
left  :左寄せ
right :右寄せ

 

スタイルシートのmarginを使用する

スタイルシートにwith属性で幅を指定して左右のmargin属性をautoに指定します。

HTML

CSS

div_margin

HTMLに直接スタイルを書く場合

ここで気をつけなければいけないのは、width属性を必ず指定するということです。
指定し忘れたり、適切な値になっていないとスタイルが崩れてしまうので注意が必要です。

 

うまくいかない例

div_failed1

widthの指定がないため、スタイルが反映されません。

 

div_failed2

widthの指定が適切な幅になっていないため、スタイルが崩れています。

 

IEへの対策

古いバージョンのWindows版IEの場合、text-align:center;
ブロック要素までがセンタリングされてしまい、
margin:auto;が対応していないというバグを抱えています。

Windows版IEでは親要素に指定したtext-align:center;が子要素にまで継承され、
子要素内でテキストがセンタリングされてしまいます。

この不具合を利用して、センタリングしたい要素の中にさらにDIV要素で囲み、
text-align:left;を指定してあげます。

HTML

CSS

 

まとめ

今回はDIV要素のセンタリング方法を紹介しました。
align属性とCSSをうまく組み合わせてコーディングすれば、
各ブラウザで差異がなくなります。
また古いバージョンのIEに対応させてtext-align属性をうまく使えば、
全てのブラウザでの見栄えを統一できます。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


NESTonlineBlog編集部

NESTonlineBlog編集部です。ご寄稿頂いた記事などを公開していきます。

Next Article【有料サイト】プロのカメラマンが撮った写真が手に入る素材サイトまとめ