开发者

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;

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜