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

https://i.sstatic.net/n9EGy.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

In your question you have a typo in the value middle. Is that in your actual code? Also if you use span rather than div you get an inline element so that vertical aligning works. — minopret
– minopret, Commented May 3, 2015 at 11:15

Alex Baulch · Accepted Answer · 2015-05-03 11:16:07Z

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

odedta · Accepted Answer · 2015-05-03 11:17:43Z

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>

Collectives™ on Stack Overflow

Center div inline-block

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related