内側のdivを水平に整列する

私は水平に（そして好ましくは垂直に）3つの内側を整列させていますdivs。 margin: 0 auto;をクラスvboxに適用すると、このトリックを実行する必要がありますが、次の最小コードのように、アライメントにはまったく影響しません。どのように私はこの整列を達成することができますか？内側のdivを水平に整列する

HTML：

<body> 
    <div id='site'> 
    <div class='main'> 
     <div class='vbox'> 
     <div id='inner1'>inner1</div> 
     <div id='inner2'>inner2</div> 
     <div id='inner3'>inner3</div> 
     </div> 
    </div> 
    </div> 
</body>

CSS：結果はthisフィドルで見ることができ

#site { 
    width: 100%; 
    height: 100%; 
} 

#main {} 

.vbox { 
    margin: 0 auto; 
}

。

出典

2016-03-28 nluigi

あなたはVBOXのための幅を定義する必要があります。

.vbox { 
    margin: 0 auto; 
    width: 30%;/*apply as your own*/ 
}

100％幅の要素が水平方向にセンタリングされていますが、テキストのためのアライメントを見ません。このためには、あなたがこれを行うことができますtext-align: center;

出典

2016-03-28 09:57:07

を適用する必要があります：

HTML

<body> 
    <div id='site'> 
    <div class='main'> 
     <div class='vbox'> 
     <div class='inner'>inner1</div> 
     <div class='inner'>inner2</div> 
     <div class='inner'>inner3</div> 
     </div> 
    </div> 
    </div> 
</body>

CSS

#main { 
    width: 100%; 
} 

.vbox { 
    width: 500px; 
    margin: 0 auto; 
    text-align: center; 
} 

.inner { 
    display: inline-block; 
    margin: 0 4px; 
}

出典

2016-03-28 10:00:47 aphextwix

ちょうど.vboxにdisplay: table;を与えること水平方向の中心になります。

.vbox { 
    margin: 0 auto; 
    display: table; 
}

Working Fiddle

別の解決策は、あなたが、ディスプレイを使用することができますdisplay: flex;

.main { 
    display: flex; 
}

Fiddle

出典

2016-03-28 10:04:02 ketan

です：あなたの内側のdivのためのインラインブロック：

を

.vbox { 
    text-align: center; 
    font-size: 0; /* white spaces fix */ 
} 

.vbox > div { 
    font-size: 1rem; /* white spaces fix */ 
    display: inline-block; 
}

Example

出典

2016-03-28 10:07:11 oboshto

重要なビットは、div要素のデフォルトの動作は、その親の全幅を取ることであるということである。この

#site { 
    width: 100%; 
    height: 100%; 
} 

#main { 
    Width:100%; 
} 

.vbox { 
    margin: 0 auto; 
    padding:0; 
} 
.vbox div{ 
    width:32%; 
    display:inline-block; 
    padding:0; 
    margin:0; 
    box-sizing:border-box; 
}

のようなものを試してみてください。これを変更するには、表示モードをインラインブロックにします。

出典

2016-03-28 10:09:04

あなたは使って縦にすべての3つのdivを揃えるためにこれを行うことができます：

#site { 
    width: 100%; 
    height: 100%; 
} 

#main {} 

.vbox { 
    margin: 0 auto; 
} 

.vbox div{ 
    width: 30%; 
    float: left; 
}

あなたはより多くのdiv要素以下を持っている場合は、単にそれに応じて幅を更新します。

出典

2016-03-28 11:05:39 Gautam

内側のdivを水平に整列する

答えて

関連する問題