Shrink anchor around centered block - html

Question

How can I shrink an anchor (green border) around a centered image of arbitrary (not specified) width? In other words, I want the seconds box with the green border centered, just like the first one. No floats, no absolute positioning.
Removing line (A) centers, but the anchor box remains elsewhere and cluttered.
Changing line (A) to block makes the anchor full-width
No luck with adding margin: 0 auto to the anchor either.
— No chance beyond a (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

If you are set against using absolute position, floats, specific width on the element, AND text-align: center (which is NOT dodgy in the least!), then your only other option is to fake a table.
img {
display: block;
background: #caa; /* red */
margin: 0 auto;
}
a {
border: 4px solid #aca; /* green */
display: table;
margin: 0 auto;
}
I still don't understand why text-align: center is dodgy...

Answer 2

Wrapping an image in another element merely transfers the centering requirement to the wrapper.
The image will now be centered in the wrapper (the anchor) due to the margin:auto...so you now have to center the wrapper.
BUT you want that wrapper to shrink-to-fit around the image. There are only a few ways on doing that AND centering the result.
Using text-align:center despite the link you mentioned which is seven years old is the optimal and most supported option.
I think you will find that support for text-align isn't even close to spotty any more.
If you want another non-float, non-positioned answer then it will be the less well supported flexbox option.
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>