CSS - Cannot get one spanned style to override another inherited style and align left

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!

Can you please include the HTML and CSS instead of describing it? — idrumgood, Jan 09 '12 at 17:16
It probably should be noted that using `!important` is generally considered less than best practice. — Nathan Arthur, Jan 09 '12 at 17:17
@Nathan Arthur, that said, would you be able to provide a better solution for this? My original one was a float, but it caused countless issues with alignment when resizing the window or changing resolutions. — Craig van Tonder, Jan 09 '12 at 17:20
I don't think span can have `text-align` that's really seen because they are not block elements. See this post: http://stackoverflow.com/questions/7756926/difference-between-span-and-div-with-text-aligncenter — Biotox, Jan 09 '12 at 17:20

score 4 · Accepted Answer · answered Jan 09 '12 at 17:19

4

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.

answered Jan 09 '12 at 17:19

GordonM

31,179
15
87
129

okay i have changed done the above chances to the regTalker class. If i change it to block, it displayed above the h1 tag, aligned to the left. If i choose inline-block, i have the same problem as before. If i then add a width of 100% i go back to the same problem as when i chose block? Any ideas? – Craig van Tonder Jan 09 '12 at 17:51
It's hard to be sure what you want without a diagram showing the desired effect, or the containing div in the markup, but if I understand you right, then what you really might want is for the span to float to the left. From the sound of it your design running up against what's called the document flow. Floating the span left will take it out of the flow and float it to the leftmost edge of the containing div. – GordonM Jan 09 '12 at 17:53
Basically what happens, is that if i float it left, the main text in the h1 tag is pushed to the right, and is no longer dead center of the page... What i am trying to achieve, is have that string stay dead center, with the addittional text within the span, to be aligned left, without affecting the main text. – Craig van Tonder Jan 09 '12 at 17:57
The page is always 100% of the screen width, so simply positioning it `left: 100px;` does not keep a fluid effect. – Craig van Tonder Jan 09 '12 at 17:59
It might be worthwhile saying that the same is true for 100%. And that i have tried to counter the main text from being pushed to the right, by adding `left: -5%;` But this also, does not keep a fluid effect. – Craig van Tonder Jan 09 '12 at 18:07

score 2 · Answer 2 · answered Jan 09 '12 at 17:18

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.)

Craig van Tonder · Answer 3 · 2012-01-09T19:08:48.587

0

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.

edited Jan 09 '12 at 19:08

answered Jan 09 '12 at 18:35

Craig van Tonder

7,497
18
64
109

CSS - Cannot get one spanned style to override another inherited style and align left

3 Answers3

Linked