![](/img/trans.png)
[英]Align two divs to be side by side and then center both divs horizontally and vertically
[英]Center align divs vertically and horizontally
我有以下代码
<div id="main">
<div id="one"> </div>
<div id="two"> </div>
<div id="three"> </div>
<div id="four"> </div>
</div>
我需要如下对齐中间的4 div,在每一侧保持相等的空间(顶部空间=底部空间,右侧空间=左侧空间):
______________________________________
| |
| ________ ________ |
| | || | |
| | one || two | |
| | || | |
| |________||________| |
| ________ ________ |
| | || | |
| | three || four | |
| | || | |
| |________||________| |
| |
|____________________________________|
等间距的四个div,请问有人可以通过CSS片段帮助我吗? 我也确实对此有很多疑问,但无法解决。 有人可以指出任何有用的链接,这些链接可以完美地解释与div对齐有关的所有概念吗?
(伙计,我知道这是重复的,但是请帮忙,因为我只是通过谷歌搜索来回走动。)
提前致谢 :)
这是在所有现代浏览器(包括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;
}
**请注意,我确实必须在您的代码中添加一个break标签( <br />
)。
@ 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>
水平居中是很容易的部分,但是有一个巧妙的技巧可以使用绝对定位和负边距使事物垂直对齐。 这是我几年前写的一个工作示例 。
以下是一些代码和说明:
<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;
}
我给出了一个略有不同的答案(但是@ 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.