CSS - Cannot get one spanned style to override ano

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

You're slightly misunderstanding how text-align works. You can't use text-align to change the alignment of a span within its container; text-align affects the contents of the element it's applied to, and cannot affect its context. (If your span were a block element, your declaration would make its contents align left within it, but would still not make the span itself align left within its container.)

Answer 2

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.

Answer 3

I have used this to answer the problem most described in comments for the answer from GordonM:

.regTalker {
    position: relative;
    top: -5px;
    left: -20%;
    margin-right: -10%;
    font-family: GoodDog;
    font-size: 0.7em;
    color: #000;
}

This was used to keep the main text within the h1 tag roughly centered, while applying positioning to the span element within it.