在 IE 中的 <a> 内垂直和水平居中 <img> 的麻烦答案

【问题标题】：trouble to vertically and horizontally center <img> inside <a> in IE在 IE 中的 <a> 内垂直和水平居中 <img> 的麻烦
【发布时间】：2017-03-25 00:33:46
【问题描述】：

我无法将 <a> 标记内的图像居中。为了使它们水平居中，我将 justify-content: center; 设置为 <span> 包含上述图像的容器。

然后我为 <a> 和 <img> 元素设置了 align-self: center;，它在 Chrome 和 Firefox 浏览器中完美运行，但 在 IE 中我不能以垂直居中图像。

重要的是我不能改变元素的流动，我的意思是<span>必须包含<a>，它包含<img>。

您可以在此处找到一个示例 -> fiddle。

【问题讨论】：

谁在乎 IE？
不幸的是我做了一点点;)
howtocenterincss.com 问题解决了xD
对于 IE，你需要给容器一个明确的高度，而不仅仅是一个最小高度

标签： javascript jquery html css internet-explorer

【解决方案1】：

给你：

CSS

.multiimage {
  background-color: black;
  text-align: center;
  display: block;
  padding: 50px 0px;
}

.multiimage a img {
    width: 90px;
    height: 90px;
    display: inline-block;
}

【讨论】：

【解决方案2】：

img 元素可以通过 text-align: center; 来居中。我知道很奇怪。

【讨论】：