为什么text-align不能直接用在img标签中呢？

Question

背景：在学文本对齐方式的时候，利用text-align文本居中。
问题：为什么text-align不能直接用在img标签中呢？
解决图片居中的方式：用div标签包裹img，然后对div标签使用css（text-align：center；文本居中）

Answer 1

text-align属性通常用于文本元素（例如段落、标题等），以控制文本在元素内的水平对齐方式。它不直接适用于<img>标签，因为<img>标签通常包含图像而不是文本。

但是，你可以将text-align应用于包含<img>标签的容器元素，以控制图像在容器中的水平对齐方式。这是因为text-align属性是用于控制容器内部文本内容的对齐方式，而不是直接应用于图像本身。

例如，如果你希望图像在其包含容器中水平居中，你可以使用以下方法：

<div style="text-align: center;">
    <img src="your-image.jpg" alt="Your Image">
</div>

在这个示例中，text-align: center;被应用于包含<img>标签的<div>容器，从而将图像在容器内水平居中对齐。

请注意，text-align只用于水平对齐，不会垂直居中图像。要在垂直方向上居中图像，你需要使用其他CSS技巧，例如设置line-height、使用flexbox、或使用position属性等。