web-dev-qa-db-ja.com

複数の子DIVを中央揃え

この問題を回避するのは少し混乱しています。

親DIVと3つ以上の子DIVがあります。

親DIVは中央揃えであり、子DIVは左にフローティングする必要がありますが、中央に揃える必要があります。

[〜＃〜] css [〜＃〜]には、

.center {
   float:left;
   height:250px;
   width:15%;
   margin: 0 auto;
   border: 1px solid black;
}

ここにコードリンクのサンプルがあります...

csscss-float
18
Santosh

要素を水平方向に中央に揃えたい場合は、フロートさせないでください。

表示方法をinline-blockに変更し、親のtext-alignスタイルを変更して中央に揃えます。

#parent {
    text-align:center;
    height:450px;
    width:75%;
    border:1px solid blue;
}
.center {
    display:inline-block;
    height:250px;
    width:15%;
    margin: 0 auto;
    border: 1px solid black;
}
<div id="parent">
    <div id="child1" class="center"></div><!--
 --><div id="child2" class="center"></div><!--
 --><div id="child3" class="center"></div>
</div>

子<div>s（HTML内）の間に空白や改行を入れないようにするか、コメントアウトしてください。これらはinline要素なので、この空白はスペースとして解釈されます。

33
George

自動マージンは、フロートが適用されている要素には適用されません。フロートを外すと始められます...

2
AGB

このプロパティを下部のdivクラスCSSに追加して、子がdivの高さに一致しないようにします

min-width: 100%;
min-height: 100%;
display: flex;
align-items: center;
0
sourav pandit