如何将这张图片垂直放置？

Question

我有一个 div 作为主包装器，然后是一个图像包装器 div 作为图像包装器，还有一个 .

我想要的是在某些较低的分辨率（例如 1300 像素）下，图像包装 div 保持垂直对齐。现在，当您看到它时，它不是垂直对齐的。顶部填充使图像包装 div 粘在顶部，而底部有一个很大的间隙。

这里是网站：

http://namdarshirazian.com

它发生在主页上。中心图像。

这里是主div的ID：

#homepage-image

这是三个的CSS

#homepage-image
{
    padding: 20px 20%;
    border: 2px #CCC solid;
    background-color: white;
    text-align: center;
    overflow: hidden;
    height: 540px;
}
#homepage-image div
{
    height: 495px !important;
    padding: 0px !important;
}
#homepage-image div img
{
    width: 100%
}

这里是元素的标记：

<div class="image" id="homepage-image">
                <div style="height: 520px; overflow: hidden;">
                    <img src="photo/homepage/image.jpg" alt="" title="">
                </div>

            </div>

CSS 位于 style.css 第 187 行。

如果您进行实时编辑，我将不胜感激。提前致谢

Answer 1

<div class="image" id="homepage-image">
   <div style="height: 520px; overflow: hidden; white-space: nowrap;">
      <span class="keepImgVerCenter"></span>
      <img src="photo/homepage/image.jpg" alt="" title="">
   </div>
</div>

.keepImgVerCenter{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

希望这会有所帮助。