Centering 2 Divs inside another vertically
I have 2 divs that I want to centre vertically inside another div. At the moment I have:
http://jsfiddle.net/5vpA3/1/
Now I understand what is going on here, but I want the left div to be vertically aligned within that container and the right div the same. But they a开发者_运维百科re vertically aligning as a pair and not individually. I have tried various things but can't seem to get it work.
Live Demo
- Remove
float: left
from#left
and#right
. Instead, use
display: inline-block
:#left, #right { display: inline-block; vertical-align: middle; }
- Due to using
display: inline-block
, you have to deal with the whitespace issue. I chose to remove the whitespace in the HTML between</div>
and<div id="right">
. See here for what happens if you don't do that. Removing the whitespace really is the easiest fix, but there are other ways.
Flexbox solution to center vertically:
#container {
display: flex;
align-items: center;
}
OP's original fiddle modified: http://jsfiddle.net/o3pmyb8c/
If you would like to also center horizontally you can add justify-content: center;
精彩评论