Question

我在网站上使用以下图库插件。 http://www.twospy.com/galleriffic/example-2.html

请注意，图像垂直对齐中间。包含图像的div具有垂直对齐属性，行高设置为div高度的维度。不幸的是，在像AOL这样的旧浏览器中，图像并没有与中间对齐。

我可以使用什么css来进行对齐？

Answer 1

有许多技术可以实现垂直居中，具有各种级别的兼容性。前两个Google结果提供了一些很好的技巧：

可能适合您的是绝对定位技术。这取决于您完全了解图像高度，但对于图像库，您可能会以相同的高度显示所有图像。基本上：

.img-container {
    position: relative;
}

.img-container img {
    height: 400px;      /* up to you what the correct height is */
    margin-top: -200px; /* put here 1/2 of the image height from above */
    position: absolute;
    top: 50%;
}

用于标记类似

<div class="img-container">
    <img src="whatever.jpg" />
</div>

Answer 2

如果我理解你的问题，那么我想我不敢说只用CSS就无法实现。在这种情况下，您可能需要计算容纳图像的容器div的宽度和高度，然后将其除以2以找到中心并将图像放在那里。

margin: 0 auto;将水平对齐，而不是垂直对齐。

注意：这将是纯粹的jquery。

Answer 3

您可以将图像上的高度强制为特定大小，将图像绝对定位到顶部的相对容器：50％带边距 - 顶部 - （高度的50％）px。这将是一个纯粹的CSS解决方案。

Answer 4

垂直对齐的最佳技巧是使用vertical-align CSS属性：

<div id="thumbs">
    <!--Thumbnails for images-->
</div><div id="gallery">
    <!--Images-->
</div>

CSS：

#thumbs {
    vertical-align: middle;
    display: inline-block; }
#gallery {
    vertical-align: middle;
    display: inline-block; }
#gallery img { display: block; }

预览：http://jsfiddle.net/Wexcode/PHrw5/

在旧浏览器中垂直对齐图像

4 个答案: