在打开容器时垂直对齐图像

时间:2011-10-07 23:24:54

标签: css image vertical-alignment

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

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

(无法上传图片,因为我显然不够信誉) - 例如:http://gbradley.com/_images/stuff/valign.png

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

1 个答案:

答案 0 :(得分:5)

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

如果您需要较旧的IE,可以使用其他方式,使用高度较大的辅助元素和一些定位怪癖:http://jsfiddle.net/kizu/CXRVn/5/

在那里你必须将负顶部偏移设置为.image,等于辅助者高度的一半减去父亲身高的一半。适用于IE6:)