中心对齐div的垂直和水平 [英] Center align divs vertically and horizontally

问题描述

我有以下code

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

我需要对齐，中间4格如下，保持平等的空间在每一侧（顶部空间=底部空间和右侧空间=左空间）：

I need to align the middle 4 div as below, keeping equal space at each side (top-space = bottom-space and right-space = left-space):

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

四div的等距，请谁能我帮我在这里有任何的CSS代码段？此外，我看到了很多在这个问题上，却无法得到这个固定的。有人能指出我解释所有相关的分区对齐完美的概念，任何有用的链接？

Four div's equally spaced, please can anyone me help me out here with any css snippet? Also I do see a lot of question over this, but can't get this fixed. Can someone point me to any useful link that explains all the concepts related to the div alignment perfectly ?

（伙计们，我知道这将是一个重复的，但请大家帮忙，因为我只是兜兜转转通过谷歌搜索。）

(Folks, I know this would be a duplicate, but please help as I am just going round and round by googling.)

在此先感谢：）

推荐答案

下面是在所有现代浏览器，包括IE8工作的一种方式：的的jsfiddle例如

Here's one way that works in all modern browsers, including 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;    
}

请注意，我没有要补充一个破发标记（＆LT; BR /＆GT; ）。您的code

​ Note that i did have to add one break tag (<br />) to your code.

这篇关于中心对齐div的垂直和水平的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！