Why this "text-align" doesn't work?

[Johnny]

I have the following code:

<p style="text-align: center">center-text<br/>
<i style="text-align: right">right-text</i></p>

but the right-text doesn't align to right as expected. Could anybody
help me out?

Regards,
Johnny

 

[Adrienne Boswell]

I have the following code:

<p style="text-align: center">center-text<br/>
<i style="text-align: right">right-text</i></p>

but the right-text doesn't align to right as expected. Could anybody
help me out?

Regards,
Johnny

P is a block element, I is inline.

 

[Toby Inkster]

P is a block element, I is inline.

And expanding upon that, I think you probably want "float:right".

 

[Johnny]

Do you mean that if an inline element is contained in a block element,
the "text-align" won't take effect?

 

[John Hosking]

Johnny wrote:

[Please don't top-post. - John]

> Do you mean that if an inline element is contained in a block element,
> the "text-align" won't take effect?
>

No, but you have to think about what you are asking for. Picture this: A
*paragraph* is a blocky kind of thing (to use very loose terminology...)
and so it can make sense to want text within it to be aligned to one
side or another (or centered or justified). But the *I element* is
inline, and not blocky. What part of the inline bit do you want to
enlarge so that the text within it aligns to the other side?

RTFM: http://www.w3.org/TR/CSS21/text.html#alignment-prop

"'text-align'... describes how inline content of a block is aligned."

HTH

 

[Andy Dingley]

Do you mean that if an inline element is contained in a block element,
the "text-align" won't take effect?

How could it? What does "alignment" mean to something that's inline
and thus doesn't have the right sort of "box" to align things into? You
might think about it as the inline elements being rendered "inside" the
content after alignment has been applied to it. They're too late to
change alignment, that has already been worked out.

You probably need to use two block elements here (<p> or <div>). Then
to add a float to keep them on the same line.


This is just the vague hand-waving version of course and Jukka will
probably swoop down out of his tree in a minute to criticise our
incorrect punctuation and bad taste in shirts. _Sometimes_ he posts a
useful explanation too, but sadly rarely.

 

[Jukka K. Korpela]

Scripsit Andy Dingley:

How could it? What does "alignment" mean to something that's inline
and thus doesn't have the right sort of "box" to align things into?

Of course it _could_. An inline element _could_ have a width wider than
needed for its content, and its content might be aligned within that box.

CSS specifications simply say that text-align does not apply to inline
elements (i.e., you _can_ setting text-align for an inline element, but the
setting has no effect). That's it. Trying to explain the reasons is probably
futile at best and confusing at worst.

You probably need to use two block elements here (<p> or <div>). Then
to add a float to keep them on the same line.

To set two different alignments, you need two block elements (in the CSS
sense). We don't know about the real situation to make an informed decision
on suitable markup (only a dummy example was shown), but it's a good guess
that either <p> followed by <div> or two <div> elements should be used. If
you use <p> followed by <div> and you dont't want spacing between them, you

This is just the vague hand-waving version of course and Jukka will
probably swoop down out of his tree in a minute to criticise our
incorrect punctuation and bad taste in shirts. _Sometimes_ he posts a
useful explanation too, but sadly rarely.

You seem to wish to reduce the average usefulness of _your_ posts by
including stupid personal attacks that any sensible 8-year old or older
child would be ashamed of.

 

[Ben C]

Scripsit Andy Dingley:


Of course it _could_. An inline element _could_ have a width wider than
needed for its content, and its content might be aligned within that box.

That's pretty much exactly what an inline-block is.