css - 为什么 text-align 不仅使文本居中，而且图像也居中？

Question

为什么要text-align居中文本和图像？

CSS：

#SupplierContainer {
    width: 100%;
    margin: 0 auto;

    background-color: Blue;

}
#SupplierContainerContentHolder {
    background-color: Yellow;
    text-align: center;
}

HTML：

<div id="SupplierContainer">
    <div id="SupplierContainerContentHolder">
        <img src="~/Shared/Suppliers/Default" alt="Suppliers: [name removed]." />
        <br />

        <p>View a complete list of our Suppliers.</p>
    </div>
</div>

Answer 1

从W3开始，

此属性描述块容器的内联级内容如何对齐。

由于<img>是一个 inline-block 元素，因此该属性也适用<img>。

看一下<img>标签，它是在哪里声明的：

IMG 元素没有内容；它通常被 src 属性指定的图像内联替换，但左对齐或右对齐的图像除外，它们是“浮动”的。

Answer 2

因为text-align用于对齐元素内容区域内的内联元素（不仅仅是文本）。如果您希望图像不受“文本对齐”的影响，请将其浮动：

#SupplierContainerContentHolder img { float:left }

Answer 3

如果你想把图像放在左/右，那么你可以使用float，即

#SupplierContainerContentHolder img{
    float:left;
}

例子。