CODEWITHSUNDEEP
css
Arrow
Arrow

Reputation: 2904

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

Why does text-align center text and images?

enter image description here

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>

Upvotes: 7

Views: 2876

Answers (3)

Pranav 웃
Pranav 웃

Reputation: 8477

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.

Upvotes: 7

The Alpha
The Alpha

Reputation: 146229

If you want to place the image at left/right then you may use float, i.e.

#SupplierContainerContentHolder img{
    float:left;
}

Example.

Upvotes: 1

kazinix
kazinix

Reputation: 30123

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 }

Upvotes: 1

Related Questions