img标签居中之text-align | 指尖上的记忆

img标签居中之text-align: ```text` 重要的一点，需要将img的样式设置:display: inline-block;或者 display: inline;不能设置为display: block; text-align只对文字，行内元素（inline），行内块元素（inline-block）起作用，对块元素（block）不起作用。

官方文档:https://developer.mozilla.org/en-US/docs/Web/CSS/text-align The text-align CSS property sets the horizontal alignment of the inline-level content inside a block element or table-cell box. This means it works like vertical-align but in the horizontal direction.

补充:关于img标签是一个可替换元素。它的 display 属性的默认值是 inline，但是它的默认分辨率是由被嵌入的图片的原始宽高来确定的，使得它就像 inline-block 一样。你可以为设置 border/border-radius、padding/margin、width、height 等 CSS 属性。

补充:vertical-align https://www.cnblogs.com/fsg6/p/12711341.html // 这个里面有代码代码可实现图+文字垂直居中(图片底部空白，可以通过设置父级的font-size：0;解决:https://www.cnblogs.com/goloving/p/8526095.html):



图片文字居中的案例:
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>

    .a{
        width: 600px;
        height: 600px;
        background-color: #bfa;
        <-----这里可以设置line-height:600px;使整个页面的内容垂直居中 ----->
    }

    img{
        vertical-align: middle;//是图片设置vertical-align属性，而不是文字
        width: 20%;
        height: 20%;

    }
    </style>
</head>
<body>
    <div class="a">
        <img src="https://image.helixlife.cn/edu-cn/package/202003/qyuJO6dp2L9gWZwXwVaV1G4698Y73Ua1ptnm3bi4.png" alt="">
    	<span>nioifhiughi</span>
    </div>
</body>
</html>

在线运行css+html平台: https://developer.mozilla.org/en-US/play