0

私は次のhtml5本体を持っています:

<body>
    <div id="container">
        <div class="content" id="topleft">topleft</div>
        <div class="content" id="topcenter">topcenter</div>
        <div class="content" id="topright">topright</div>
        <div class="content" id="centerleft">centerleft</div>
        <div class="content" id="centercenter">centercenter</div>
        <div class="content" id="centerright">centerright</div>
        <div class="content" id="bottomleft">bottomleft</div>
        <div class="content" id="bottomcenter">bottomcenter</div>
        <div class="content" id="bottomright">bottomright</div>
    </div>
</body>

そして、次のような動的レイアウトを実現したいと思います。

ブロック要素の整列

各コンテンツ要素は、その親コン​​テナーに対してコーナーにレイアウト (ドッキング) する必要があり、すべての中央要素はそれぞれの辺の中央に配置する必要があります。親コンテナーのサイズや位置は問題にならないため、絶対ピクセル座標を使用して配置することはできません。

これは私がこれまでに持っているものです:

div#container {
    background: lightblue;
    position: relative;
    width: 500px;
    height: 500px;
}

div.content
{
    width: 100px;
    height: 100px;
    position: absolute;
    background: lightyellow;
    text-align: center;
    margin: auto;
}

div#topleft {
}

div#topcenter {
    right: 50%; /*obviously doesn't center*/
}

div#topright {
    right: 0px; 
}

div#centerleft {
    top: 50%; /*obviously doesn't center*/
    left: 0px;
}

div#centercenter {
    top: 50%; /*obviously doesn't center*/
    right: 50%; /*obviously doesn't center*/
}

div#centerright {
    right: 0px;
    top: 50%; /*obviously doesn't center*/
}

div#bottomleft {
    bottom: 0px;
}

div#bottomcenter {
    bottom: 0px;
    right: 50%; /*obviously doesn't center*/
}

div#bottomright {
    right: 0px;
    bottom: 0px;
}

コーナーではすべて正常に機能しますが、もちろんすべての中央要素が中央に配置されていないため、その理由は理解できます。CSS3でこれがどのように行われるのかわかりません...

4

1 に答える 1

1

固定高さの要素をその親で垂直方向に中央揃えするには、次を使用します。

top:50%;
margin-top:-50px;

水平の場合は、左とマージン左で同じことを行うか、何も定義せずに「margin:0 auto」を使用できます。これは、自動的に左と右に均等に塗りつぶされるためです。

于 2013-04-12T22:11:42.310 に答える