为什么文本对齐不仅是中心文本，还有图像？

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>是内联块元素，因此该属性也适用于<img>。

查看<img>标记，其中标明：

  

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

Answer 2

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

#SupplierContainerContentHolder img { float:left }

Answer 3

如果您想要将图像放在左/右，那么您可以使用float，即

#SupplierContainerContentHolder img{
    float:left;
}

Example