0

私は流動的なレイアウト設計を使用しており、 class を含む div を classcenterを含む div の内側で水平方向に中央に配置したいと考えていouterます。これを試しましたが、うまくいきません。私は何を間違っていますか？

HTML:

<div class="outer">
    <div class="inner"> // this div has height=0. Why?
        <div class="center">
            // stuff
        </div>
    </div>
</div>

CSS:

.outer {
    position: absolute;
    left: 0;
    right: 0;
    top: 50px;
    height: auto;
}

.inner {
    width:100%;
}

.center {
    margin:0 auto;
}
4

3 に答える 3

0

内部をページの通常のように扱う必要があるため、次のdivようにします。

#inner {
    position:fixed;
    top: 50%;
    left: 50%;
    width:234px;
    height:90px;
    margin-top:-45px; /*set to a negative number 1/2 of your height*/
    margin-left:-117px; /*set to a negative number 1/2 of your width*/
    border: 0.5px solid #ccc;
}

これはトリックを行い、それに応じて調整できます。

于 2012-12-10T01:24:52.653 に答える
0

margin-left にパーセンテージを使用します。例:

.center
{
width:90%;
margin-left:5%;
}

5% を使用した理由は、中央の幅がコンテナーの 90% であるため、10% のスペースが残っているためです。中央に配置するには、使用可能なスペースの半分だけ左に移動する必要があります。この場合は5%

于 2012-12-10T01:34:25.263 に答える
0

中央揃えの div にはおそらくインライン ブロックが最適なオプションです。外側の div を text-align:center と共に使用して、内側のコンテナーを中央に配置します。あなたが持っているように内側と中央のdivは本当に必要ありませんが、私は例のためにそれを保持しました. 以下はフィドルリンクです：

http://jsfiddle.net/UYw8S/2/

たとえば、ボーダーとパディングが追加されました。

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

.outer {
position: absolute;
left: 0;
right: 0;
top: 50px;
height: auto;
background:#ccc;
border:1px solid #333;
}

.inner {
display:block;
margin:10px;
border:1px solid #333;
text-align:center;
}

.center {
margin:10px 0;
text-align:left;
height:40px;
width:80%;
display:inline-block;
background:#fff;
padding:10px;
}
于 2012-12-10T01:42:16.870 に答える