3

要約すると、コンテナー内でコンテンツを垂直方向に配置する方法はほとんどありません。これらは主なアプローチです（今それを行うためのまったく異なる方法がある場合は、例を提供することは非常に寛大です-ここに組み込みます）

  1. プロパティの使用position- http://jsfiddle.net/EjV4V/3/これは素晴らしいですが、私にとっては、特にレンダリングの最適化の問題を考えると、少しやり過ぎです。最新のすべてのブラウザで動作しますが、IE7 では動作しません。transform
  2. display: inline-block補助ブロックを 1 つ追加してプロパティを使用する - http://jsfiddle.net/mmxm4/3/。追加の DOM 要素を使用しているため、このアプローチは適切ではないと思います。IE7 では動作しません。:beforeまた、コンテンツを使用または:after生成できることにも言及する価値があります (これについて言及してくれた @nclenorton に感謝します) 。しかし、もう一度 - IE7 ではありません。
  3. プロパティの使用display: table- http://jsfiddle.net/Ppk3p/2/。このアプローチが適切な場合もあれば、そうでない場合もあります。他の例とは対照的に、子セルの幅に問題があることに注意してください。いずれにせよ、IE7 では動作しません。display: table-cell

  4. 使用display: box- http://jsfiddle.net/9Phgg/9/ - これは物事を処理する最もセクシーな方法ですが、私たちが知っているように、仕様は 100% 完成していません。さらに、Opera はフレックス ボックスをサポートしていません。そして、もちろん、IE7 でこのようなことを試みることさえ考えないでください。

    私の質問は次のとおりです:「上記のアプローチのすべてが IE7 で失敗するという事実に関して、すべての最新のブラウザーとIE7 で要素を垂直方向に中央揃えする最も一般的で、エレガントで、シンプルで正しい方法は何ですか?」

    ヘラス、2012 年ですが、テーブル レイアウトを使用することが解決策であると強く感じています。たとえばposition: absolute、JavaScript 式を使用したエキゾチックなアプローチを見てきましたが、これはエレガントでシンプルとはほど遠いものです。

経験豊富な html 開発者の皆さん、間違っていたら訂正してください。

UPD: 実際には、もう 1 つのアプローチがありますが、根本的に間違っており、多くの理由で使用できないと思います。しかし、言及する価値があります。デフォルトでは、ボタン内のすべてが垂直方向の中央に配置されるため、http://jsfiddle.net/s5nz4/3/をご覧ください。これはIE7で機能しますが、私たちはここにいるすべての成人です。これが不適切であることを理解してください）））

4

5 に答える 5

3

display: inline-blockIE7 のサポートが必要な場合は、「要素を追加する」方法を選択する傾向があります。これはIE7 で少し変更を加えるだけで機能します。例を次に示します。

IE7 のサポートが必要ない場合は、通常、このdisplay: table-cell方法を使用します。

時々、display: table-cellメソッドを使用できない場合があります。通常は、要素の下部に何かを絶対に配置する必要がある場合display: table-cellです。position: relative少なくとも Firefox では、表のセルでは機能しません。そのような場合、display: inline-block「余分な要素」が を介して挿入されることを除いて、メソッドを使用し:beforeます。これにより、HTML がきれいに保たれます。

于 2012-07-04T16:13:46.080 に答える
1

これを行うのに最適な方法ではありませんが、2つのdivを使用して、ピンクのボックスを常に中央に配置し、一方をもう一方を「押す」ことができます。

http://jsfiddle.net/EjV4V/25/

このアプローチはIE7で機能するはずですが、常に固定マージンを使用する必要があります。

于 2012-07-04T16:40:42.540 に答える
1

IE7 では機能しませんが、「spreader」の代わりに疑似要素を使用すると、すべての主要なブラウザーで機能するはずです: http://jsfiddle.net/mmxm4/6/

IE <= 7 に関しては、afterクラスで要素を作成する .htc 動作を追加することは、実際には犯罪ではないと思います。少なくとも、PIE を使用する以上のことはありません。

コードは次のとおりです (複数のプロジェクトでテスト済み)。

<PUBLIC:COMPONENT lightWeight="true">
<!-- saved from url=(0014)about:internet -->

    <PUBLIC:ATTACH EVENT="oncontentready" FOR="element" ONEVENT="append_after()" />
    <PUBLIC:ATTACH EVENT="ondocumentload" FOR="element" ONEVENT="append_after()" />

    <script type="text/javascript">
        function append_after() {
            if (!this.after) {
                var el = element,
                    doc = el.document,
                    aft_el = doc.createElement('div');

                this.after = "true";
                aft_el.setAttribute('class', 'after');
                this.appendChild(aft_el);
                aft_el.outerHTML = aft_el.outerHTML;

                this.runtimeStyle.behavior = "none";
            }
        }
    </script>

</PUBLIC:COMPONENT>

条件付きクラスを使用している場合は、次のように追加します。

.lte-ie7 .parent {
  behavior: url(/path/from/the/site/root/after.htc);
}

次に、両方のinline-block要素についてdisplay: inline; zoom: 1;、スタイルに追加します。ただし、より洗練された解決策は、「クロスブラウザーインラインブロック」手法を使用することです。インラインブロックのグローバルクラスを定義し、必要な場所で使用します:

.inline-block {
    display: -moz-inline-box;
    display: inline-block;
    vertical-align: top;
}

.lte-ie7 .inline-block {
    display: inline;
    zoom: 1;
}
于 2012-07-04T16:53:22.427 に答える
1

センタリングするものの高さがわかっている場合は、ボックスを上から 50% 絶対に配置し、ボックスの高さの半分の負のマージンを使用して中央に配置できます。ie7で動作させるのは面倒なほど複雑ですが、動作します。

http://css-tricks.com/snippets/css/exactly-center-an-imagediv-horizo​​ntally-and-vertically/

例：

.center {
    width: 300px;
    height: 300px;
    position: absolute;
    left: 50%;
    top: 50%; 
    margin-left: -150px;
    margin-top: -150px;
}
于 2012-07-04T16:13:02.400 に答える
0

これに対するCSS3ソリューションはbox-align

http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_box-pack

ただし、一部のブラウザーではサポートされていないため、次のような jQuery プラグインを使用します。

http://www.nealgrosskopf.com/tech/thread.php?pid=37

于 2012-07-04T16:16:30.310 に答える