ホームページ > 記事 > ウェブフロントエンド > div を水平方向および垂直方向に中央揃えにする方法_html/css_WEB-ITnose
div を水平方向および垂直方向に中央揃えにする方法_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:38:311194ブラウズ
div を水平方向および垂直方向に中央揃えにする方法
@(css)[Miaotong]
はじめに
div のコンテンツを水平方向および垂直方向に中央揃えにする必要があることがよくあります。そこで、divを水平方向と垂直方向に中央揃えにする方法を紹介します。
コード:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>div水平垂直居中</title> <style> *{ margin:0; padding:0; } div.box{ background-color:pink; border:2px solid #000; width:960px; height:500px; margin-left:50px; } </style></head><body> <div class="box"> <img src="girl.jpg" alt="美女"> </div> </body></html> レンダリング:
次に、画像を div の水平方向の中央に配置します。まず、画像上にボックスのレイヤーを配置します。
コード:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>div水平垂直居中</title> <style type="text/css"> *{ margin:0; padding:0; } div.container{ background-color:pink; border:2px solid #000; width:500px; height:500px; margin:50px auto; display:table; } div.wrapper{ text-align:center; display:table-cell; vertical-align:middle; } div.wrapper img{ border:1px solid #ddd; } </style></head><body> <div class="container"> <div class="wrapper"> <img src="girl.jpg" alt="美女"/> </div> </div> </body></html> IE8/Firefox/Chrome/Safari/Opera ページの効果:
IE6/IE7 ページの効果:
IE6/IE7 との互換性が必要であることがわかります:
コード:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>div水平垂直居中</title> <style type="text/css"> *{ margin:0; padding:0; } div.container{ background-color:pink; border:2px solid #000; width:500px; height:500px; margin:0 auto; display:table; margin-top:20px; } div.wrapper{ text-align:center; display:table-cell; vertical-align:middle; } div.wrapper img{ border:1px solid #ddd; } </style> <!--[if lte IE 7]> <style type="text/css"> div.container{ position:relative; } div.wrapper{ position:absolute; left:50%;top:50%; } div.wrapper img{ position:relative; left:-50%;top:-50%; } </style> <![endif]--></head><body> <div class="container"> <div class="wrapper"> <img src="girl.jpg" alt="美女"/> </div> </div> </body></html> IE6/IE7 レンダリング:
要約すると、div 内のコンテンツを水平方向に中央揃えするには、 text-align:center; を使用できます。
垂直方向の中央揃えを実現するには、コンテナーの display:table とラッパーのディスプレイを使用します。 table -cell; とvertical-align:middle; は、div 内の画像の水平方向と垂直方向の中央揃えを実現できます。
複数の画像がある場合、中央揃えを実現するには:
コード:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>div水平垂直居中</title> <style> *{ margin:0; padding:0; } div.container{ background-color:pink; border:2px solid #000; width:700px; height:500px; margin:0 auto; margin-top:50px; } div.wrapper{ text-align:center; margin-top:28px; } div.wrapper img{ border:1px solid #ddd; width:200px; margin:10px; } </style></head><body> <div class="container"> <div class="wrapper"> <img src="girl3.jpg" alt="美女"/> <img src="girl3.jpg" alt="美女"/> <img src="girl3.jpg" alt="美女"/> <img src="girl3.jpg" alt="美女"/> <img src="girl3.jpg" alt="美女"/> <img src="girl3.jpg" alt="美女"/> </div> </div> </body></html> IE6/IE7/IE8/Firefox/Chrome/Safari/Opera ページの効果:
text-align:center in div.wrapper;水平方向のセンタリングを実現し、垂直方向のセンタリングを実現するには margin-top:28px。
28px=[500-(200+1+1+10+10)*2]/2、つまり、外側のレイヤーの高さから内側のレイヤーの高さを引いたものを2で割って、margin-topを設定します。そしてそれが中心になります。
間違いや提案がある場合は、修正してください。-----Miaotong。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。