Question

我有两个元素并排。元素2小于元素1.两个元素都没有固定的高度。我需要垂直居中Element 2.如何使用CSS实现这一目标？

编辑：

这是我到目前为止所做的：

<div id="container" style="width: 100%;">
    <div id="img1" style="float: left;">
        <img src="image1.jpg".../>
    </div>
    <div id="img2" style="float: right;">
        <img src="image2.jpg".../>
    </div>
</div>

img1的高度总是大于img2的高度。我希望img2垂直对齐。希望这能澄清我想要实现的目标。

Answer 1

最简单明了的方法是使用display: table和vertical-align。然而，IIRC（自从我出现浏览器兼容性问题已经有一段时间了）对display: table和朋友的支持不在......某些常见的IE版本，也许？无论如何，如果display: table被忽略，添加其他规则以做出足够的回退可能会很好。

<div id="container" style="display: table;">
    <div id="div1" style="display: table-cell; vertical-align: middle;">
        <img id="img1" src="image1.jpg" />
    </div>
    <div id="div2" style="display: table-cell; vertical-align: middle;">
        <img id="img2" src="image2.jpg" />
    </div>
</div>

（当然样式应该在样式表中;这只是与原始示例相匹配而不知道用例。）

display值table，table-row和table-cell基本上与HTML table，tr和{{1}完全相同}，但是你可以省略它们中的任何一个（就像我在这里一样，直接在td s内使用table-cell），布局引擎会做出明智的事情。

Answer 2

不容易。一些流行的黑客包括使用display：table-cell和父级使用display：table（我不记得是否需要valign =“center”属性），或使用绝对定位top：45％左右（不精确，但对于小元素可以。）

要确定最佳方法，我们需要了解有关布局的更多信息。他们的内心是什么？元素1和2之间是否会有很大的Y距离？他们的父母有固定的身高吗？他们俩都有同一个父母，还是另一个兄弟姐妹？你用什么方法将它们并排放置？

请记住，许多技巧需要额外的黑客才能在IE中工作，并且使用Javascript只是作弊并且会使您的网站无法访问/烦扰视力不佳的人（可能使用脚本不知道的屏幕阅读器），人们禁用脚本（特别是在移动或命令行浏览器上，如果有的话可能不支持它们），搜索引擎等。可能只使用CSS（虽然你可能需要添加一些容器元素），但确切的方法取决于你究竟在做什么。

Answer 3

如果你只需要支持像Safari这样的新浏览器（例如，为iPhone构建webapp），CSS3提供了一种优雅的方法，没有浮点数或负边距。所有详细信息：http://www.html5rocks.com/en/tutorials/flexbox/quick/#toc-center

Answer 4

如果没有桌子，我认为你不能可靠地做到这一点。凯文的解决方案可能会有效，除非你需要支持IE（我们大多数人都这样做）。并且，在这种情况下，表标记实际上可能小于基于div的标记。

Answer 5

将它们放在另一个元素中，给它一个最小宽度，并将左右边距设置为自动。

CSS中的垂直居中元素

5 个答案: