3

絶対配置の固定幅要素をコンテナー内で水平方向に中央揃えにする再利用可能な方法と、再利用可能なコード (たとえば、負のピクセル マージンがない) が必要です。

私は完璧に機能する組み合わせに出くわしました：

http://jsfiddle.net/aaronadams/Mquha/

<div class="outer center">
    <div class="inner center"></div>
</div>

.outer {
    position: absolute;
    width: 400px; height: 400px;
    background: #999;
}

.inner {
    position: absolute;
    width: 200px; height: 400px;
    background: #666;
}

.center {
    left: 0; right: 0;
    margin-left: auto; margin-right: auto;
}

クリーンで、(比較的) 理解しやすく、IE 8 以降、Chrome、Firefox、Safari で動作するように見えます。いつでも。

このポジショニング動作が正しいか正しくないかを示唆するドキュメントが見つかりません。それはどれですか？本番環境に適していますか、それともまったく信頼できませんか?

4

3 に答える 3

3

2 つのコンテナー.outerと.innerが絶対的に配置されているという制約がある場合、実行したことは正しいだけでなく、親コンテナーの幅が指定されていない場合に実行する唯一の方法でもあります。

あなたのソリューションは、CSS 2.1 仕様に従って正確に動作し、堅牢です。

参考までに、以下を確認する必要があります。

http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width

絶対配置要素の幅を計算する方法を指定します。

jsFiddle の例では、2 つ<div>の を含むブロックがビューポートまたはルート要素であることを認識する必要があります。topまたはbottomプロパティを指定して、垂直方向の配置についてはまだ何も言っていません。また、絶対配置された要素はフローから外れているため、それらの固有の高さは含まれているブロックの高さを計算する際に考慮されません。一部のアプリケーションでは、このアプローチを修正なしでは使用できなくする要因になります。

さらに、サンプル コードを相対的に配置されたラッパー<div>でラップし、固定幅を適用した場合、次のデモに示すように、子要素は正しく中央揃えになります: http://jsfiddle.net/audetwebdesign/aNS5j / (ラッパー要素に十分な高さを許可する必要がある場合があることに注意してください。)

ただし、コメントで先に指摘したように、包含ブロック (私のデモのビューポートまたはラッパー要素) の幅が子要素の幅 (例では 400px) より小さい場合、センタリングは行われません。より長い作業になりますが、これはCSS仕様によると依然として正しい動作です。

あなたの質問は、CSS ビジュアル フォーマット モデルがどのように機能するかについて、基本的かつ重要な基礎に触れています。

さておき

.inner要素に絶対配置を使用しなくても同じ効果を得ることができます。その場合は、margin: 0 autoそれで十分でした。少し簡潔な CSS 宣言によるコスト削減。

マイナスマージンについて

負のマージンは機能し、最近のほとんどのブラウザーで一貫して実装されていますが、CSS 2.1 仕様では、負のマージンをどのように実装する必要があるかは規定されていません。理論的には、まだ CSS 仕様に準拠している一部のユーザー エージェントでは、負のマージンが壊れる可能性があります。

于 2013-04-22T11:00:19.947 に答える
0

position:absolute;プールに浸かると、エレガントなソリューションを放棄していることに常に気づきました。残念ながら、問題を解決する唯一の方法が絶対配置である場合が多くあります。

あなたが言及したように、私が知る限り、業界標準は負のマージンを使用しています: http://jsfiddle.net/Mquha/3/

繰り返しますが、これは汚れているように感じます。さらに、再利用できません。

私はあなたが提案したアプローチを調べましたが、あなたの方法はかなり現代的な発見のように思えます.それが機能することにも少し驚いています. いずれにせよ、マイナスマージン方式よりもはるかに簡単で、おっしゃるように主要なブラウザはすべてサポートされているようです。私はあなたが将来提案した方法を採用していますが、まだ完全ではありませんが、少なくとも負のマージンを使用するよりも汚れが少ないです。絶対配置を使用している場合にのみ、同じことを行うことをお勧めします。

于 2013-04-22T02:44:11.733 に答える
-1

これが私の最善の策です

CSSをに変更します

#outer {
    position: absolute;
    width: 400px; height: 400px;
    background: #999;
}

#inner {
    position: absolute;
    width: 200px; height: 400px;
    background: #666;
}

.center {
    margin-left: auto; margin-right: auto;
}

そしてあなたのhtmlへ

<div id="outer center" class="center">
    <div id="inner center" class="center"></div>
</div>
于 2013-04-22T02:52:47.377 に答える