0%

css text-align center 图片不居中?

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

仔细看了一下代码

1
2
3
<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).

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