CSS `text-align: center` 图片居中失效的解决方法

以前是用 flex 布局让图片居中，今天突然想试一下 text-align: center 让图片居中，但是失败了。

仔细看了一下代码

<div style="text-align: center; width: 500px; border: green solid 1px;">
    <img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="display: inline-block;" />
</div>

原来是图片上要挂一个 display: inline-block; 属性才能让图片居中。

翻了一下 MDN 的文档（中文没有相关解释）

https://developer.mozilla.org/en-US/docs/Web/CSS/display

The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would).

这说的啥？该元素生成一个块元素框，它将与周围的内容一起流动，就好像它是一个单独的内联框（行为很像被替换的元素）。