css text-align overruled?

Question

I have a <div> with text-align:left - inside that: a <p> with text-align:center.
The "closest" property should win = center - but it doesn't all 3 <p>'s are left-aligned ?!?
Same result in both Firefox and Chrome - This is how it looks in Chrome's "inspector": enter image description here
NB: I can't reproduce it in a simple html-file..
Any idea what's happening here ?

EDIT: Found it finally: I'd hyphenated (those damn invisible shy's) a little too thoroughly...

Are you using js in this file or is the text align: center inline css? The "closet" is the inline style="text-align: center" — Timbadu, May 30 '12 at 18:51
They are both inline - "produced" with JS (a string) and then inserted into a container-div — T4NK3R, May 30 '12 at 18:54
Your div is only 72px wide - maybe it is actually being centered but just not too apparent. — m.edmondson, May 30 '12 at 18:54
Hm.. There's several lines - the shorter are also left-aligned... — T4NK3R, May 30 '12 at 19:00

score 1 · Accepted Answer · edited Jan 05 '13 at 22:18

1

The problem was "silent hyphens" (& shy;) in my CSS.

edited Jan 05 '13 at 22:18

Bart

19,692
7
68
77

answered Jun 07 '12 at 11:45

T4NK3R

4,245
3
23
25

score 0 · Answer 2 · answered May 30 '12 at 18:55

0

From what you've shown us, it doesn't make sense. But I'm going to guess that, somewhere in a CSS file, there is something like:

p {text-align: left !important;}

answered May 30 '12 at 18:55

Niet the Dark Absol

320,036
81
464
592

Wrong, you can see in the inspector `element.style` is overruled. This kind of inline css already override any distant CSS. It should come from some JS code I guess. – zessx May 30 '12 at 18:57
1

Nope - a `!important` rule will even override locally applied styles like this one. – Niet the Dark Absol May 30 '12 at 18:57
@T4NK3R What happens if you just remove the `text-align:left` from the containing `
`? Since all of its children are block-level elements with a specific `text-align`, it's kind of redundant.
– Niet the Dark Absol May 30 '12 at 19:03
@Kolink - Then it's centered. (There IS no !important) What about the "Unknown property name" message ? – T4NK3R May 30 '12 at 19:05
Did you notice the `unknown property name` ? Could it have some special generated chars in "text-align" ? Try to rewrite it manually – zessx May 30 '12 at 19:05
@samsamX The html is delivered by CKeditor.. But I tried different kinds of alignment (right + justify) - both get overruled too - yet both work fine if the [div] doesn't have it's text-align:left. VERY strange.. – T4NK3R May 30 '12 at 19:18
@Kolink - no it's not redundant. If there's no specific alignment of the [p]'s I WANT them to inherit left from the parent-[div] - since that in turn inherits center from it's parent - this is deep : ) – T4NK3R May 30 '12 at 19:22

css text-align overruled?

2 Answers2