[英]Center div inline-block
我有两个div
<html>
<head>
<title></title>
<style type="text/css">
#div1 {
width: 45%; height: 500px;
margin-right:2.5%;
margin-top: 30px;
background-color: red;
display: inline-block;
}
#div2 {
width: 45%; height: 300px;
margin-right:2.5%;
margin-top: 30px;
background-color: blue;
display: inline-block;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
给我这个
http://i.imgur.com/pQcHqfo.png
正如你可以看到我的第二个(小)div在另一个的底部,我怎样才能将它放在中心位置。
我试图将它们放在另一个div中并使用vertical-align:minddle
您只需要将vertical-align: middle
添加到两个div中,蓝色将垂直居中显示。 见这里: http : //codepen.io/alexbaulch/pen/LVVqzG
为了使用vertical-align:middle; 你需要设置display:inline或display:inline-block,这两个一起去。
#div1 { width: 45%; height: 500px; margin-right:2.5%; margin-top: 30px; background-color: red; display: inline-block; vertical-align: middle; } #div2 { width: 45%; height: 300px; margin-right:2.5%; margin-top: 30px; background-color: blue; display: inline-block; vertical-align: middle; }
<div id="div1"></div> <div id="div2"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.