中心對準的div垂直和水平

我有以下代碼中心對準的div垂直和水平

<div id="main"> 
    <div id="one"> </div> 
    <div id="two"> </div> 
    <div id="three"> </div> 
    <div id="four"> </div> 
</div>

我需要對齊中間4個格如下，在每一側（頂部空間=底部空間和右側空間保持等於空間=左空間）：

______________________________________ 
|         | 
|   ________ ________   | 
|  |  ||  |  | 
|  | one || two |  | 
|  |  ||  |  | 
|  |________||________|  | 
|   ________ ________   | 
|  |  ||  |  | 
|  | three || four |  | 
|  |  ||  |  | 
|  |________||________|  | 
|         | 
|____________________________________|

四個div的等間隔，請任何人我可以幫我在這裏任何css代碼片段？此外，我也看到很多問題，但無法解決這個問題。有人能給我指出任何有用的鏈接，可以完美地解釋與div對齊有關的所有概念嗎？

（夥計們，我知道這將是一個重複的，但請大家幫忙，因爲我只是兜兜轉轉，通過谷歌搜索。）提前:)

來源

2012-06-18 mtk

這裏的所有工作在單向

謝謝現代瀏覽器，包括IE8：jsFiddle example。

HTML

<div id="main"> 
    <div id="one"></div> 
    <div id="two"></div><br /> 
    <div id="three"></div> 
    <div id="four"></div> 
</div>

CSS

div { 
    border:1px solid #999; 
} 
#main { 
    width:400px; 
    height:400px; 
    display:table-cell; 
    vertical-align:middle; 
    text-align:center; 
} 
#one,#two,#three,#four{ 
    width:100px; 
    height:100px; 
    display:inline-block;  
}

注意，我確實有一個突破標籤（<br />）添加到您的代碼。

來源

2012-06-18 20:27:04 j08691

這不顯示我測試的任何瀏覽器中心：Safari瀏覽器，Chrome瀏覽器，Firefox或iPhone。它與左上角對齊。 @mtk，這不是你的解決方案 –

@ j08691 IE8是否被視爲現代瀏覽器？ – starbeamrainbowlabs

@ j08691有個很好的例子。但這裏是我的，如果它有什麼用途？

<html> 
<body> 

<div style="width: 960px; margin: 0 auto;"> 

    <div> 
     <div style="width: 480px; float: left;"> 
      <div style="padding: 10px; border: 1px solid #F00;"> 
       1 
      </div> 
     </div> 
     <div style="width: 480px; float: left;"> 
      <div style="padding: 10px; border: 1px solid #F00;"> 
       2 
      </div> 
     </div> 
    </div> 

    <div> 
     <div style="width: 480px; float: left;"> 
      <div style="padding: 10px; border: 1px solid #F00;"> 
       3 
      </div> 
     </div> 
     <div style="width: 480px; float: left;"> 
      <div style="padding: 10px; border: 1px solid #F00;"> 
       4 
      </div> 
     <div> 
    </div> 

</div> 

</body> 
</html>

來源

2012-06-18 20:31:02 Theo

我去一個稍微不同的答案（但@ j08691有一個很好的解決方案），

我測試了

#main{ 
    position:absolute; 
    top:50%; 
    left:50%; 

    width:100px; 
    height:100px; 
    margin:auto; 
} 

#one, #two, #three, four{ 
    float:left; 
    width:50px; 
    height:50px; 
}

完整的工作代碼是，

<html> 
<head> 

<style media="screen" type="text/css"> 

#main{ 
    position:absolute; 
    top:50%; 
    left:50%; 

    width:100px; 
    height:100px; 
    margin:auto; 
} 

#one, #two, #three, four{ 
    float:left; 
    width:50px; 
    height:50px; 
} 

.box{ 
    float:left; 
    width:50px; 
    height:50px; 
} 


#one{ 
    background-color:#f00; 
} 
#two{ 
    background-color:#0f0; 
} 
#three{ 
    background-color:#00f; 
} 
#four{ 
    background-color:#000; 
} 


</style> 
</head> 
<body> 
<div id="main"> 
    <div id="one" class="box"> </div> 
    <div id="two" class="box"> </div> 
    <div id="three" class="box"> </div> 
    <div id="four"class="box" > </div> 
</div> 
</body> 
</html>

來源

2012-06-18 20:32:18

水平居中是很容易的部分，但有一個巧妙的把戲，使用絕對定位和負邊緣垂直對齊。 Here's a working example I wrote a few years back。

下面是一些代碼，並解釋：

<div id="main"> 
    <div id="one"></div> 
    <div id="two"></div> 
    <div id="three"></div> 
    <div id="four"></div>  
</div>

CSS

#main { 
    position: absolute; 
    top: 50%; /* gets the first pixel in the center of the browser */ 
    left: 50%; 
    height: 860px; 
    width: 860px; 
    margin-top: -430px; /* negative margin half the height of the div to make it appear center */ 
    margin-left: -430px; 
    border: solid 1px #000; 
    overflow: visible; /* allows an absolutely positioned element to contain floats */ 
    } 
#one, #two, #three, #four { 
    float: left; 
    height: 400px; 
    width: 400px; 
    background-color: blue; 
    margin: 20px; 
    } 
#one, #three { 
    margin-right: 0; 
    } 
#one, #two { 
    margin-top: 20px; 
    margin-bottom: 0; 
    }

來源

2012-06-18 21:41:04

中心對準的div垂直和水平

回答

相關問題