html - 响应图像锚定在其容器 div 的顶部

Question

我正在为移动设备开发一个网页，我需要在其中预览一些图像。面临的问题是，每当我更改(减少)窗口的宽度时(显然图像会调整大小并且其高度会降低以保持纵横比)图像会粘在 div 的顶部，其中放置了图像控件。css 属性 vertical-align:middle; 不适用于此 div。还尝试使用 line-height 属性也不起作用。我需要将图像垂直居中对齐

我的标记是

<div id="dvImgPreview" class="imagePreview" style="display:block;" runat="server">                       
      <asp:Image ID="ImgIPreview" runat="server" ImageUrl="" />
</div>

为此使用的 css 是

.imagePreview{text-align:center;vertical-align:middle; margin:10px 10px 5px 10px;height:410px;background-color:#000;}
.imagePreview img{max-width:100%;}

div的高度需要固定为410px

Answer 1

因为你定义了一个高度，你可以使用

.imagePreview img{
    margin: auto;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
}

不要忘记在 .imagePreview 上声明 position:relative;

Fiddle