Question

I have a div classed content.

Inside the div, is a h1 tag.

Inside the h1 tag is a span tag, with its’ class set to regTalker.

Here is the tag:

<h1><span class="regTalker">Not Listed? Register <a href="?register">here</a></span>Browse Listings</h1>

The regTalker class looks like this:

.regTalker {
    text-align: left !important;
    font-family: GoodDog;
    font-size: 0.7em;
    color: #000;
}

The container div has text-align value set to center.

The main string inside of the h1 tag displays centered.

The string inside of the span tag is also centered, not aligned to the left, as i would presume it to be…

What gives? Surely !important should override the content div text-align value?

There are two different css files in question, the main one, and the seconary one, which houses the regTalker class… These files are linked one after each other, so incase this comes up in an answer, it is not due to the instance of inclusion.

I have also cleared my cache and reloaded the css file directly. So its not that either.

I am using firefox 8.0.1, have not tried it on other browsers yet.

If anyone has any advice, or input regarding this issue, or how to solve the problem, it would be greatly appreciated, thank you!

Answer 1

The text-align applies to the content of the element it’s applied to, not the element itself. The text inside the span is left-aligned, but the span itself is centre-aligned within its parent. As the span is an inline level element, it’s only ever as wide as its content and as the span is centre aligned, its content will also appear to be centre-aligned…

If the span was as wide as its container, then the text in it would appear left-aligned, but you have to apply a display: block or display: inline-block to it before you can assign it a width.

Also, never use !important. It’ll just lead to tears and gnashing of teeth in the long run.