使用 CSS 居中图像（无显示：块）

Question

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

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

我正在尝试将也充当 link 的图像居中，但是当它具有 display: block 样式时，它充当块元素，使其宽度中的所有内容都成为 link 还有。有什么办法可以解决这个问题吗？

Answer 1

图像与文本一样是内联的，因此：

.imagelink {
    text-align:center;
}

Answer 2

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

JS Fiddle

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

Answer 3

如果您的图片是 200px

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

如果你的图片是 65%

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

使用 CSS 居中图像（无显示：块）

Centering Images With CSS (Without Display: Block)

css

image

centering