如何將一個盒子及其內容置於CSS中？

我已經看了一些其他的答案，但無法讓他們爲我的特殊情況工作。我已經簡化幷包含了下面的整個代碼塊。基本上它只是在藍色框中顯示文本。我想知道如何中心框。如何將一個盒子及其內容置於CSS中？

<!DOCTYPE html> 

<html> 
<head> 
    <style type="text/css"><!-- 
#content { 
width:500px; 
padding: 10px 10px 10px; 
background-color: #D1ECFF; 
position: relative; 
border-radius: 10px; 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
} 
--></style> 
</head> 
<body> 

<div id="content"> 

    <h2>Create</h2> 

</div> 
</body> 
</html>

來源

2012-01-22 deltanovember

h2的風格在哪裏？定義「藍色方塊」的樣式在哪裏？爲了回答你的問題，我們需要知道每個元素是否有**固定**或**變量**高度和寬度。如果沒有這些細節，你的問題*非常*模糊，不僅難以回答，而且對於有同樣問題的其他人也不會很有幫助。 –

因爲#content的寬度，可以左，右頁邊距設置爲auto。這會將元素居中在其父項中。代碼爲margin: 0 auto;的短位將頂部/底部邊距設置爲零，並將左/右設置爲自動。

http://jsfiddle.net/vL5r2/

#content { 
    margin: 0 auto; 
    width:500px; 
    ...

來源

2012-01-22 04:19:49 mrtsherman

如果要居中盒子和它的內容垂直的水平，你可以用絕對定位和切緣陰性做得一樣可以this jsfiddle可見。

來源

2012-01-22 05:38:45 magicalex

如何將一個盒子及其內容置於CSS中？

回答

相關問題