ウェブ-CSSセンターDaquanの

当センターは、しばしば遭遇したCSSレイアウトを使用することです。プロパティを取得することができ、時には、中央にCSSを使用した場合、時にはすべてのブラウザに互換性があるように、特定のスキルを必要とし、いくつかの一般的に使用される方法紙は、簡単な紹介を中心に。

注:この記事は、特に明記他の方法について話しました、それはIE6 +、グーグル、Firefoxや他の主要なブラウザと互換性があります。

まずいくつかの簡単な、ヒトおよび動物に無害を中心に方法は次のとおりです。

 

1.マージンをautoに設定されています

具体的には、センタは、この方法は、水平方向にセンタリングすることができ、フローティング要素は絶対要素または無効に位置付け、自動に設定されているマージン左マージンから右の要素となります。

 

図2に示すように、テキスト整列を使用して:中心

これは何も言うこと、水平方向の中央れた画像、ボタン、テキストなど(などインラインまたはインラインブロック、などの表示)のための唯一のインライン要素ではありません。しかし、これら二つの素晴らしいIE6,7ブラウザで、中心の任意の要素のレベルをすることが可能であることに留意すべき。

 

図3に示すように、テキストのように中心に垂直な単一ラインの行の高さを使用して

親コンテナのテキストの高さにあるテキスト行の高さは、テキストのみの行の場合に適用されます。

 

図4に示すように、フォームを使用

フォームを使用している場合は、限り使用さtdとして、中心にさまざまな問題を心配する必要(も目を使用する場合があります)の要素=「センター」を合わせないと上のこの2つのプロパティのvalign =「真ん中」私たちは、垂直方向と水平方向中央に質問の内容の内側に完全にそれを扱うことができ、そしてテーブルには内部の縦中央に配置されます、その内容にデフォルト設定されます。あなたは、CSSでテーブルの内容を中心に制御したい場合は、縦方向に垂直整列を使用して中心:ミドル、ミドルレベル用として、CSSは何の対応する属性ではないように見えるが、IE6,7に、我々は、テキスト整列使用することができますセンター水平中心要素、IE8 +とGoogle、Firefoxや他のブラウザテキスト整列テーブルに:中心のみインライン要素は、ブロック要素に作用する有効ではありません。

QQのスクリーンショット20130925155722

QQのスクリーンショット20130925155722

Ie6,7は、コンテンツのテーブルに位置合わせすることができるテキストアルギンCSS水平方向により制御され、関係なくライン内のコンテンツ要素の有効またはブロック要素です。

QQのスクリーンショット20130925155722

しかし、IE8 +とクロムは、Firefoxや他のブラウザのテキスト整列:ブロック要素の中心が有効でない、専用属性を揃え、独自のフォームを使用することができます。

 

図5に示すように、ディスプレイ使用:中央にテーブルセルを

テーブルの要素ではない人のために、我々は、表示することができます:あなたがセンターの特性に合ったフォームを使用することができるように、テーブルセルのテーブルセルにそれをシミュレートします。例えば:

QQのスクリーンショット20131014161356

QQのスクリーンショット20131014161356

しかし、この方法が唯一のIE8 +、グーグル、Firefoxや他のブラウザで使用することができ、IE6、IE7は無効です。

 

上記の方法は非常に基本的なもの、自然はここに方法を中心の技術のいくつかを使用する必要のあるある、奇妙な邪悪なクラフトメーター呼び出すことはできません。

図6に示すように、中心の絶対配置を使用

この法律は唯一の我々はすでにその幅や要素の高さがことを知っているものに適用されます。

絶対配置は絶対要素を中心にされていない時間の50%にプロパティの左または上の要素に配置されてこの原理の中間によって行われるが、中央の位置よりも素子の右側または左側に幅または高さ距離の半分は、マージン、左マージントップの負の値を使用するか、バック中心位置にそれを引っ張ることが必要である、マージン値が半分幅または高さをとって負の要素です。

QQのスクリーンショット20130925155722

業績:

QQのスクリーンショット20130925155722

あなたが一方向に集中実装する場合、左のみを使用することが可能である、余白、左の水平センタリングがトップを使用して達成され、マージントップ垂直センタリングが達成されます。

 

図7に示すように、中央方法の別の使用絶対位置

これと同じ法則は、我々は彼らの幅または高さを知っているこれらの要素に適用され、残念ながらそれだけでIE9 +、グーグル、FirefoxとW3Cの基準に沿って、他の近代的なブラウザをサポートしています。

この方法を理解するために使用次のコード:

QQのスクリーンショット20130925155722

業績:

QQのスクリーンショット20130925155722

あなたは幅と高さの要素を定義していないここでなら、彼は幅が左、右の値によって決定されるのです、ハイトップの下の値によって決定されますが、要素の幅と高さを設定する必要があります。要素の値は、1つの方向に変位されるようにし、左、右、上、缶底を変える場合は、あなたが試す行くことができます。

 

図8に示すように、水平に対向配置浮動中心を用いて

この方法は、フロートソリューションが中心かについてもレベルであり、我々は、要素の幅中心を知っている必要はありません。

親要素の場所の幅の50%にフロートの相対位置が、今回要素がセンタリングされていませんが、より多くの中央に位置し、独自の幅の半分よりも、あなたは彼を必要とする:中心の原理をフローティングであります次に、子要素は反対側に位置し、その余分なプルバックその幅の半分、あれば、それ自体を位置決めするために反対側に対して配置され、それらの左右50%に設定することができるの半値幅としてそれを得たので、どれだけ彼らの実際の幅を知りません。

有利に反対側に位置する浮動中心を使用して、このフィッティング方法は、線の幅も常に変化している場合でも、要素の幅中心に知られていない、という欠点が中心要素に余分な要素をラップする必要があることです。

コードを見てください:

QQのスクリーンショット20130925155722

 

業績:

QQのスクリーンショット20130925155722

 

図9に示すように、フォントサイズを使用して、垂直センタリングが達成されます

親要素の高さが既知である場合、その上下左右中央サブ要素作るれ、この方法を用いることができ、子要素の幅又は高さは必ずしも知られていません。

この方法では、IE6とIE7でのみ有効です。

この方法は、親要素がフォントサイズの適切な値に設定され、1.14取得親要素および子要素の値で割った高さの値は、この値はインラインまたはインラインブロック要素でなければならないから成り、必要プラス垂直整列:中央のプロパティ。

1.14である理由については、むしろ数で割っ他よりも、誰も本当に知らない、あなただけのラインでこの数1.14を覚えておく必要があります。

QQのスクリーンショット20131014161356

QQのスクリーンショット20131014161356

真ん中にテーブルセル、およびここではフォントサイズ法は、IE6とIE7に適しているので、これらの2つの方法を組み合わせ:方法5ではIE8 +に言った、Firefoxの、Googleや他のブラウザは現在、ディスプレイを使用することができますすべてのブラウザと互換性のことが可能になります。

QQのスクリーンショット20131014161356

QQのスクリーンショット20131014161356         QQのスクリーンショット20131014161356

上記の例では、要素を中央にしたいので、ブロック要素であるので、我々はあなたが要素が画像などのインライン要素であり、中央に配置したい場合は、この手順を省略することができ、インライン要素に彼を取る必要があります。

さらに、垂直整列場合:中間の親要素ではなくサブ要素で記述されているが、これはフォントサイズの値が約1.5になるのみについて計算するとき1.14の、この値を用いても可能です。

おすすめ

転載: www.cnblogs.com/lh-web/p/web_center.html
おすすめ