打破容器时垂直对齐图像

Posted 2023-03-05

【中文标题】打破容器时垂直对齐图像

【英文标题】：Vertically align image while breaking out of container

【发布时间】：2011-12-03 08:55:18

【问题描述】：

好的，所以我有各种解决方案来垂直对齐容器内任意高度的元素。当内容的高度小于容器时，所有这些都有效。

如果内容高度高于容器怎么办？例如，假设我有一个固定高度为 100 像素的容器。我也有一些不同高度的图像；我需要垂直对齐这些，以便图像的中心点与容器的中心点匹配，如下所示：

（无法上传图片，因为我显然不够有名气）- 示例在这里：http://gbradley.com/_images/stuff/valign.png

如果不手动指定图像的位置，我该如何实现？我觉得我错过了一些非常明显的东西。

【问题讨论】：

我可以建议使用一些 javascript(jQuery) 吗？

我真的希望有一个纯 CSS 的解决方案；我可以用 JS 轻松做到这一点，但如果可能的话，我想避免这样做！

不要认为有一个纯粹的 css 方法可以做到这一点，我的好人。由于您希望它们根据它们的大小从容器中分离出来，因此您需要手动输入一个最大值或让 javascript 为您计算它。

【参考方案1】：

如果你不需要 IE 小于 8 并且在标准模式下，你可以使用大的负边距和辅助伪元素：http://jsfiddle.net/kizu/CXRVn/

如果你需要旧版的IE，你可以使用另一种方式，使用高度大和一些定位怪癖的辅助元素：http://jsfiddle.net/kizu/CXRVn/5/

您必须将负顶部偏移设置为.image，等于助手高度的一半减去父母高度的一半。在 IE6 中也可以工作:)

【讨论】：

+1 - 非常好。不知道这样的事情是可能的。

太棒了，这正是我想要的。没有考虑过使用伪元素，似乎效果很好。

太棒了！这是一个使用文本并使用包装器隐藏溢出的版本：jsfiddle.net/MSUfR