Center div inline-block
Question
I have two divs
<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>
Gives me this
http://i.imgur.com/pQcHqfo.png
As you can see my second(small) div is at the buttom of the other, how can I center it verticaly.
I tried to put them in another div and use vertical-align:minddle
2 answers
solution1
2 ACCPTED 2015-05-03 11:16:07
You just need to add vertical-align: middle to both divs and the blue one will appear vertically centered. See here: http://codepen.io/alexbaulch/pen/LVVqzG
solution2
1 2015-05-03 11:17:43
In order to use vertical-align: middle; you need to set display: inline or display: inline-block, these two go together.
#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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.