使用 CSS 居中图像（不显示：块）答案

【问题标题】：Centering Images With CSS (Without Display: Block)使用 CSS 居中图像（不显示：块）
【发布时间】：2015-12-21 06:52:39
【问题描述】：

img.imgdemo {
  background: white;
  width: 65%;
  margin: auto;
}

<a class=imagelink href=periodictable.htm>
  <img class=imgdemo src=ptabledemo.png>
</a>

我正在尝试将一个也用作链接的图像居中，但是当它具有 display: block 样式时，它充当一个块元素，使其宽度内的所有内容也成为链接。有没有办法解决这个问题？

【问题讨论】：

你能提供你正在尝试的代码吗？
刚刚做了。显示时：挡住；设置好了，它会执行我刚才提到的操作。
我认为@dwreck08 的意思是工作代码。可能是指向该图像的绝对链接？
我认为图像并不特别重要。我找到了另一种解决方案，将图像和链接放在 div 中，然后将 div 居中（这似乎更容易），但 dwreck 的解决方案也很有效！

标签： css image centering

【解决方案1】：

图像像文本一样是内联的：

.imagelink {
    text-align:center;
}

【讨论】：

【解决方案2】：

您可以使用的一个选项是transform: translate() 属性并提供a.imagelink display: inline-block。这将允许您将图像的大小设置为您想要的任何大小，并确保链接大小相同并始终保持居中：

JS Fiddle

a.imagelink {
  display: inline-block;
  background: blue;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
img {
  width: 50%;
  display: block;
}

【讨论】：

谢谢！完美运行！

【解决方案3】：

如果你的图片是 200px

img {
  width: 200px;
  margin-left: calc(50% - 200px / 2);
}

如果你的图像是 65%

img {
  width: 65%;
  margin-left: calc(50% - 65% / 2);
}

【讨论】：