Question

我有一个div作为主要的包装器，然后是一个图像包装器div作为图像包装器，以及一个。

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

这是网站：

它发生在主页上。中心形象。

这是主要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;
}

希望这有帮助。

如何将此图像垂直放置？

1 个答案: