DIV中的中心图像(原始图像可以大于DIV)

Question

在div.中处理不同大小图像的可怕居中问题

从StackOverflow中得到了一个解决方案（如何在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不确定您是否已经设法解决了问题。

如果不看看我的博客文章，将大图像集中在较小的容器中，他们也是一个代码笔演示。

我遇到了同样的问题，并设法在不需要任何javascript或内联样式的情况下使其正常工作。

希望它能帮助