水平對齊內部`divs`

我正在尋找水平（最好是垂直）對齊三個內部divs。應用margin: 0 auto;到類vbox應該做的伎倆，但在下面的最小代碼，它根本不影響對齊。我怎樣才能完成這種對齊？水平對齊內部`divs`

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：

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

#main {} 

.vbox { 
    margin: 0 auto; 
}

結果可以this小提琴可見。

來源

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

只要給display: table;到.vbox將使其水平中心。

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

Working Fiddle

另一種解決方案是display: flex;

.main { 
    display: flex; 
}

Fiddle

來源

2016-03-28 10:04:02 ketan

您可以使用display：inline-block的爲你內心的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

嘗試是這樣的

#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; 
}

最重要的一點是，一個div的默認行爲是要佔用其母公司的整個寬度。要改變它，你需要給它顯示模式的內嵌塊。

來源

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

水平對齊內部`divs`

回答

相關問題