在中心块周围收缩锚

Question

如何围绕任意（未指定）宽度的居中图像缩小锚点（绿色边框）？换句话说，我希望带有绿色边框的秒框居中，就像第一个一样。没有花车，没有绝对定位。

• 删除线（A）中心，但锚盒仍然在其他地方并且杂乱无章。
• 将线（A）更改为块使锚定全宽
• 将margin: 0 auto添加到锚点也没有运气。

- 除(slightly dodgy) text-align center之外没有机会？

Codepen

HTML

<img src="" width="123" height="100">  
<hr>
<a href='#'>  
    <img src="" width="123" height="100">  
</a>

CSS

img {
  display: block;
  background: #caa; /* red */
  margin: 0 auto;
}

a {    
  display: inline-block;  /* (A) */
  border: 4px solid #aca; /* green */
}

Answer 1

如果你设置使用绝对位置，浮点数，元素上的特定宽度，和text-align：center（至少不是狡猾！），那么你唯一的另一个选择就是伪造一个表。

img {
  display: block;
  background: #caa; /* red */
  margin: 0 auto;
}

a {    
  border: 4px solid #aca; /* green */
  display: table;
  margin: 0 auto;
}

我仍然不明白为什么text-align：center狡猾......

Answer 2

将图像包装在另一个元素中只是将居中要求转移到包装器。

由于margin:auto，图像现在将在包装器（锚点）中居中...所以你现在必须使包装器居中。

但是你希望那个包装器缩小到适合图像。只有几种方法可以做到这一点并使结果居中。

使用text-align:center，尽管您提到的七年前的链接是最佳和最受支持的选项。

我认为你会发现对text-align的支持甚至不再接近参与。

如果你想要另一个非浮动的，未定位的答案，那么它将是不太受支持的flexbox选项。

body {
  display: flex;
  justify-content: center;
}
img {
  display: block;
  background: #caa;
  /* red */
  margin: 0 auto;
}
a {
  border: 4px solid #aca;
  /* green */
}

<a href='#'>
  <img src="http://lorempixel.com/image_output/city-q-c-123-100-3.jpg">
</a>