在另一个垂直居中放置2个Divs [英] Centering 2 Divs inside another vertically

问题描述

我有2个div，我想在另一个div内垂直居中。目前，我有：

I have 2 divs that I want to centre vertically inside another div. At the moment I have:

http：// jsfiddle .net / 5vpA3 / 1 /

现在我知道这里发生了什么，但是我希望左div在该容器中垂直对齐，并且右div一样。但是它们在垂直方向上成对排列，而不是单独排列。我尝试了各种方法，但似乎无法使其正常工作。

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 are vertically aligning as a pair and not individually. I have tried various things but can't seem to get it work.

推荐答案

实时演示

• 从 #left 和 #right 删除 float：left code>。



• 相反，请使用 display：inline-block ：

• Remove float: left from #left and #right.

• Instead, use display: inline-block:

#left, #right {
    display: inline-block;
    vertical-align: middle;
}

由于使用 display：inline-block ，则必须处理空白问题。我选择删除< / div> 和< div id = right> 。 请参见此处，如果不这样做会发生什么。删除空白确实是最简单的解决方法，但是还有其他方法。

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.

这篇关于在另一个垂直居中放置2个Divs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！