Why does text-align not only center text, but images, too?

Question

Why does text-align center text and images?

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

From W3,

This property describes how inline-level content of a block container is aligned.

Since <img> is an inline-block element, this property applies to <img> as well.

Have a look at the <img> tag, where it is stated :

The IMG element has no content; it is usually replaced inline by the image designated by the src attribute, the exception being for left or right-aligned images that are "floated" out of line.

Answer 2

Because text-align is used to align inline elements (not just text) inside the content area of an element. If you want the image not to be affected by the "text-align", float it then:

#SupplierContainerContentHolder img { float:left }