0

こんにちは私はdivを中央に配置するのに問題margin:0 auto;があります。HTMLを次のように構造化しています。

<div class="wrapper">  
    <div class="content">  
        <nav class="mini">  
            <!-- nav class mini content -->
        </nav>   
    </div>  
</div>

CSSは次のようになります。

    .wrapper {  
        width:1154px;
        margin:0 auto;
    }

.content {  
     width:906px;  
     margin:0 auto;  
     text-align:center;
}

.mini {
   width: 350px;  
   margin:0 auto;
}

.mini私はその中心にいることを期待します.contentが、それは私が間違っていることではありませんか？

4

4 に答える 4

1

すべてのdivが中央に配置されます。唯一の問題は、liが左に浮いていることです。だからあなたのulセンターを作ってください、そしてそれはよく見えるでしょう。

.mini ul {display:inline-block;}

フィドルのデモ： http： //jsfiddle.net/surendraVsingh/pYbAP/7/

于 2012-07-04T15:10:12.707 に答える
0

フィドルでは、.mini divは.content内に中央揃えされていますが、.mini内にあるコンテンツは中央揃えされていません

そこのULにもmargin：0 auto cssを適用し、text-align：centerを.miniに適用する必要があります。

于 2012-07-04T15:09:01.260 に答える
0

問題は、にを与えることmax-widthです.wrapper div。ブラウザの幅が1154pxより小さい場合、.wrappersの幅がブラウザの幅になります。ブラウザウィンドウを十分に小さくすると、.wrappersの幅は子の幅よりも小さくなり.contentます。親が子よりも小さい場合、は0になるmargin: 0 autoため、そこにあることを実行できません。auto

max-widthをに変えてみてくださいwidth。ブラウザの幅に関係なく、希望どおりに機能します。

于 2012-07-04T15:10:34.640 に答える
0

navはhtml5要素であるため、最初にブロックとして表示する必要があります。nav {display：block; 実際、デフォルトでブロックとして表示されない要素は、marginプロパティを使用して中央に配置することはできません。ほとんどのフレームワークはすでにそれを行っていますが、EricMeyerのCSSResetからこのcssリセットコードをいつでも使用できます。

于 2012-07-04T15:26:23.310 に答える