html - 围绕中心 block 收缩 anchor

Question

如何缩小任意(未指定)宽度的居中图像周围的 anchor (绿色边框)？换句话说，我想要绿色边框居中的秒框，就像第一个一样。没有 float ，没有绝对定位。

• 移除行 (A) 中心，但 anchor 框仍保留在其他位置且杂乱无章。
• 将行 (A) 更改为 block 使 anchor 全宽
• 将 margin: 0 auto 添加到 anchor 也不走运。

— 没有机会超越 (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

如果您反对在元素上使用绝对位置、 float 、特定宽度和 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 是狡猾的...