1

div ( ) を垂直方向に配置したいのですがrectangle、この div には親がありません。プロパティcontainerを使用するために 1 つ ( ) を作成しましvertical-alignたが、誰かがより良い方法を知っていれば削除できます。

body四角形をdivの中央に（水平および垂直に）配置し、応答性を高めたいだけです。

これが私が試したものですが、うまくいきません（長方形はウィンドウの上部に近いままです）：

<html>
    <head>
        <style>
            .rectangle {
                width: 88%;
                height: 87%;
                margin: auto;
                padding:10px;
                background:red;
                display:inline-block;
                vertical-align:middle;
            }

            .container {
                text-align: center;
                height: 100%;
                width: 100%;
            }
        </style>
    </head>
    <body>
    <div class="container">
        <div class="rectangle">
        </div>
    </div>
    </body>
</html>

CSS のみを使用して達成することは可能ですか、それとも JavaScript が必要ですか?

4

2 に答える 2

2

CSS のみでこれを行うには、いくつかの方法があります。これを CSS3 としてタグ付けしたので、これを実現するためにいくつかの新しいアプローチを使用できます。また、Chris Coyer は、CSS を使用した垂直方向のセンタリングについて素晴らしい記事を書いています。いくつかのリンクは次のとおりです。

http://css-tricks.com/centering-in-the-unknown/

http://css-tricks.com/centering-percentage-widthheight-elements/

中央に配置する要素の高さがわかっている場合は、要素を絶対に配置し、負のマージンで幅/高さを考慮することができます。

もう 1 つの方法は、css 表示テーブルを使用するように要素と本体を設定することです。

もう 1 つの新たなオプションは、フレックスボックス仕様です。これは、多くの面倒な作業を処理します。フレックスボックスの詳細については、次の場所を参照してください。

http://css-tricks.com/using-flexbox/ http://css-tricks.com/snippets/css/a-guide-to-flexbox/

そして、フレックスボックスを他のスタイリングと組み合わせる方法の例:

http://css-tricks.com/replicating-google-hangouts-chat/

個人的には翻訳オプションが一番気に入っていますが、フレックスボックスのサポートが拡大するにつれて、このタイプのレイアウトが最も簡単になるでしょう。

于 2013-08-02T10:34:57.883 に答える
0 
<html>
    <head>
        <style>
            .rectangle {

            background: #000;
            height: 200px;
            width: 200px;
            }

            .container {
                width: 100%; /* Firefox needs this */

            height: 100%; /* Height can be anything */

            /* WebKit (Chrome & Safari) */
            display: -webkit-box;
            -webkit-box-pack: center;
            -webkit-box-align: center;

            /* Firefox */
            display: -moz-box;
            -moz-box-pack: center;
            -moz-box-align: center;

            /* IE */
            display: -ms-box;
            -ms-box-pack: center;
            -ms-box-align: center;

            /* Native CSS */
            display: box;
            box-pack: center;
            box-align: center;

            background: red;

            }
        </style>
    </head>
    <body>
    <div class="container">
        <div class="rectangle">
        </div>
    </div>
    </body>
</html>

Internet Explorer 10 は、代替の -ms-flex-align プロパティをサポートしています。Firefox は代替の -moz-box-align プロパティをサポートしています。Safari、Opera、および Chrome は、代替の -webkit-box-align プロパティをサポートしています。注: フレキシブル ボックスは、Internet Explorer 9 以前のバージョンではサポートされていません。

于 2013-08-02T11:06:19.107 に答える