ホームページ > ウェブフロントエンド > CSSチュートリアル > elements_CSS/HTML の水平方向のセンタリング ソリューションの完全なコレクション

elements_CSS/HTML の水平方向のセンタリング ソリューションの完全なコレクション

WBOY
リリース: 2016-05-16 12:10:52
オリジナル
1915 人が閲覧しました

まず、単純な XHTML/HTML ファイル コード (部分) を見てみましょう。 #container を水平方向に中央揃えにすることです。












content


Lorem?ipsum?dolor?sit ?amet,?consectetuer?adipiscing?elit.Phasellus?varius?eleifend.





適応境界線を使用する ( auto?margin)
要素を水平方向に中央揃えするための推奨方法は、margin プロパティを使用し、左右の値を auto に設定することです。ただし、#container の幅を指定する必要があります。

div#container?{
margin-left:?auto;
margin-right:?auto;
width:?168px;
}
このスキームは最新のブラウザーで動作しますWeb 標準互換モード (準拠?モード) であれば、IE6 であってもすべて有効です。残念ながら、以前のバージョンの IE/Win では動作しません。このためのテーブルを作成します:


適応境界サポート リストの参照?ブラウザ?バージョン?サポート?
Internet Explorer 6.0、準拠?モード?はい?
Internet Explorer 6.0、quirks?mode?いいえ?
Internet Explorer 5.5 Windows?いいえ?
Internet Explorer 5.0 Windows?いいえ?
Internet Explorer 5.2 Macintosh?はい?
Mozilla 現在のすべてのバージョン?はい?
Mozilla Firefox?すべてのバージョン?はい?
Netscape? 4.x?いいえ?
Netscape?6.x+?はい?
Opera?6.0、?7.0?Macintosh?および?Windows?はい?
Safari?1.2?はい?

ブラウザのサポートには制限があるにもかかわらず、ほとんどのデザイナーは可能な限りこれを行うことを推奨しています。ただし、あらゆる状況で CSS を使用できます。

テキスト配置 (text-align) を使用する
この解決策では、body 要素に適用され、center の値が割り当てられる te​​xt-align プロパティを使用する必要があります。

body{
text-align:center;
}
すべてのブラウザを公平かつ徹底的に扱い、簡単に操作できます。ただし、これはテキストに与えられるプロパティであり、#container 内のテキストも中央揃えになります。したがって、レイアウトに関して追加の作業を行う必要があります。

div#container{
text-align:?left;
}
このようにして、テキストの配置をデフォルトの状態に戻すことができます。

統合された境界線とテキスト配置
テキスト配置には下位互換性があるため、最近のブラウザーはアダプティブ境界線もサポートしており、多くのデザイナーはこれらを組み合わせてブラウザー間での使用を実現しています。

body{
text-align:?center;
}
#container?{
margin-left:?auto;
margin-right:?auto;
border :?1px?solid?red;
width:?168px;
text-align:?left
}
残念ながら、まだハックなので完璧ではありません。テキストの配置には冗長なルールを記述する必要があります。しかし今では、より完璧なクロスブラウザー ソリューションを使用できるようになりました。

負の境界ソリューション
このソリューションは絶対位置決め (absolute?positioning?) と組み合わせる必要があります。まず、#container を絶対位置に配置し、#container の左端がページ解像度の半分になるように 50% 左にオフセットします。次に、#container の左マージンを #container の幅の半分に等しい負の値に設定します。

#container?{
background:?#ffc?url(mid.jpg)?repeat-y?center;
position:?absolute;
left:?50%;
width :?760px;
margin-left:?-380px;
}
ほら、いいえ?ハック! Netscape?4.x でもサポートされています。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のおすすめ
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート