ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS レイアウトで Web ページを水平方向に中央揃えするための一般的な方法_エクスペリエンス交換
CSS レイアウトで Web ページを水平方向に中央揃えするための一般的な方法_エクスペリエンス交換
- PHP中文网オリジナル
- 2016-05-16 12:06:341551ブラウズ
一般的に、ページの水平方向の中央揃えは、特に初心者にとって頭痛の種です。ブラウザ間の非互換性も大きな問題を引き起こす可能性があります。ページを水平方向に中央揃えする一般的な方法について説明します。
以下の内容については「cssを使いこなす」をご覧ください。
html コード:
コードは次のとおりです。
<body>
<div id="wrapper">
</div>
</body>
ie居中办法：
body {
text-align:center;
min-width:760px;
}
#wrapper {
width:720px;
text-align:left;
}ie は text-align:center を誤って、テキストだけでなくすべてを中央に配置します。次に、コンテナの内容を左側に再配置します。
ie 以外:
コードは次のとおりです:
#wrapper {
width:720px;
margin:0 auto;
}
ie および ie 以外と互換性を持たせるにはどうすればよいですか?
コードは次のとおりです:
#wrapper {
width:720px;
position:relative;
left:50%;
margin-left:-360px;
}
まず、コンテナの左端をページの中央に配置します。をクリックして、幅の半分を左に移動します。
上記は、css レイアウト web ページの水平方向の中央揃えの一般的な方法です_体験交換の内容です。その他の関連コンテンツについては、php 中国語 web サイト (www.php.cn) に注目してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。