在打破容器的情况下垂直对齐图像

5
好的,所以我有各种解决方案来垂直对齐任意高度元素在容器内。所有这些都适用于内容高度小于容器的情况。
如果内容高度比容器高怎么办?例如,假设我有一个固定高度为100px的容器。我还有一些不同高度的图片;我需要垂直对齐它们,使图像的中心点与容器的中心点相匹配,如下所示:
(无法上传图像,因为我显然没有足够的声望)- 示例在此处:http://gbradley.com/_images/stuff/valign.png 不手动指定图像的位置,如何实现这一点?我觉得我可能漏掉了什么非常明显的东西。

我可以建议您使用一些JavaScript(jQuery)吗? - vantrung -cuncon
我希望有一个仅基于CSS的解决方案;尽管我可以用JS轻松实现,但如果可能的话,我想避免使用它! - Graham
没有纯CSS的方法可以做到这一点,我的好人。由于您希望它们根据其大小突破容器,因此您需要手动输入顶部值或让JavaScript为您计算。 - Pat
1个回答

5
如果您不需要低于8版本的IE并且使用标准模式,您可以使用大的负边距和帮助伪元素:http://jsfiddle.net/kizu/CXRVn/ 如果您需要旧版IE,则可以使用另一种方法,使用具有大高度和一些定位怪癖的帮助元素:http://jsfiddle.net/kizu/CXRVn/5/ 在那里,您必须将负上偏移设置为.image等于帮助程序高度的一半减去父级高度的一半。在IE6中也有效 :)

+1 - 非常棒。我从来没有想到过这样的事情是可能的。 - Pat
太棒了,这正是我要找的。没想到可以使用伪元素,看起来完美无缺。 - Graham
太棒了!这里有一个使用文本并通过包装器隐藏溢出的版本:http://jsfiddle.net/MSUfR/ - Jess Telford

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接