3

divを含むラッパーdiv要素があり、その中にdivが含まれています。これらのdivは、実行時に追加または削除されます。HTMLとCSSは次のようになります。

​<div id="Wrapper">
   <div class="InnerGreen">
       <div class="InnerContent"></div>
       <div class="InnerContent"></div>
   </div>    
</div>

​#Wrapper{
     width:600px;
     height:50px;  
     margin:10px 20px;    
     background:blue;}

.InnerGreen{
     background:green;
     margin:10px auto; // this doesn't center
     overflow:hidden;
     display:inline-block;}

.InnerContent{
     background:yellow;
     height:30px;
     width:40px;
     float:left;
     margin:3px 5px;}

私は内側inline-blockを包むために使用しています; ただし、divを水平方向に中央に配置しないようです。もちろん、これは幅を定義すると機能しますが、実際には、divはすべての異なるサイズのdivのコレクションであるため、実行時にの幅を設定することはできません。.InnerGreenWrappermargin:auto.InnerGreen.InnerContent.InnerGreen

どうすればmargin:auto作品を作ることができますか？ここにjsfiddleがあります。

あなたの提案をありがとう。

4

4 に答える 4

7

インライン要素にはマージンがありません。として機能するように指示.InnerGreenすることによりinline-block、基本的に、ポジショニングに関してインラインとして機能するように指示することになります。一方、text-alignを使用して中央に配置することもできます。

#Wrapper {
    text-align: center;
}

更新されたJSFiddleを参照してください。

于 2012-08-29T18:01:21.513 に答える
2

これは技術的には正しい方法ではないかもしれませんがtext-align:center、ラッパーdivを設定することはできます。

于 2012-08-29T18:01:35.370 に答える
0

私の知る限り、要素の幅を決定できなければ、margin：autoメソッドを使用することはできません。正確にはエレガントではありませんが、中央のテーブルを使用してこれを実現できます。

<center>
   <table>
    <tr><td align="center">
       <div>This will be centered.</div>
    </td></tr>
   </table>
</center>

あなたのコードで：http： //jsfiddle.net/MaxPRafferty/yA7Nm/

于 2012-08-29T18:12:50.650 に答える
0

jqueryを使用してdivを中央に配置することができます。

<script type="text/javascript">

    $(function() {
        var containerWidth = $(".InnerGreen").width();
        $(".InnerGreen).css("width", containerWidth);
    });
</script>

その後、マージンのCSS設定が残りを実行する必要があります。

実行時に内部コンテンツを追加する場合と同様に、高さ：autoをスタイルに追加することもできます。これにより、要素の成長をより適切に制御できます。

于 2012-08-29T18:13:03.490 に答える