Question

在DIV中挣扎着不同尺寸图像的可怕中心。

从StackOverflow（How to vertically align an image inside div）获得一个解决方案，使用<SPAN>作为虚拟元素（使用vertical-align: middle），除了大于DIV的图像外，它运行良好这些都是正确调整大小，但显示在DIV下面。

如果我删除<SPAN>，则居中工作在水平方向，但不在垂直方向。

如果有一个简单的改变，我可以随心所欲地制作解决方案。

测试时间

http://mclportal.net/ModalTests.html

Answer 1

这对你有用：

<div id="divModal" style="display:table">
   <div id="divImage" style="display:table-cell; vertical-align:middle">
      <img id="img" src=".........">
   </div>
</div>

Answer 2

您应该在图片上放置最大宽度和最大高度。然后只需使用具有相对位置的div内的图像的相对定位。例如......

<div style="height: 300px; width: 300px; position: relative; text-align: center;>
<img src="#" style="max-width: 200px; max-height: 200px; position: relative; top: 50px; />
</div>

使用这样的方法，所有图像将彼此垂直对齐并在div容器中居中。另外，设置最大高度和宽度将使图像保持其纵横比。

Answer 3

@mcl不确定您是否已成功解决问题。

如果没有结帐我的博客帖子centering large images in smaller containers，那么他们也就是那里的codepen演示。

我遇到了同样的问题，并设法让它无需任何javascript或内联样式。

希望有所帮助

DIV中的中心图像（原件可能大于DIV）

3 个答案: