Text Vertical-Align: center in <p> tag?

code sample inside

[iProgram]

Please take a look of <No URLs, thanks. See TOS [WebmasterWorld.com] and CSS Forum Charter [WebmasterWorld.com]>

1: <img width="80" height="80" class="c1" />
2: <p class="c2">Text 2</p>
3: <p class="c3">Text 3</p>
4: <p class="c4">Text Vertical-Align: Center</p>

The full html code looks like this:

<li class="c0">
<img width="80" height="80" class="c1" />
<p class="c2">Text 2</p><p class="c3">Text 3</p>
<p class="c4">Text Vertical-Align: Center</p>
</li>

I want to make the text in <p class="c4"> vertical-align: center. The following CSS code implements the layout. What should I do to implement the Vertical-Align: Center style?

.c0{
clear: both;
width: 580px;
border: 1px solid #F0F0F0;
}

.c1{
float: left;
}

.c2{
float: left;
width: 300px;
}

.c3{
float: left;
width: 200px;
}

.c4{
float: left;
width: 500px;
height: 60px;
}

[edited by: SuzyUK at 8:02 am (utc) on Dec. 22, 2004]

[SuzyUK]

iProgram.. take a look at this recent thread [webmasterworld.com] it may help.

line-height might be an answer for you, but note the bit about text wrapping because as soon as it does you have 2 (or more) times the line(box)-height.

Suzy

[DrDoc]

I want to make the text in <p class="c4"> vertical-align: center.

Just to set things straight:

If you want to center something horizontally you need to use

text-align: center

If you want to align something vertically in reference to surrounding elements you need to use

vertical-align: middle

Applying

vertical-align: middle

to the paragraph will not vertically center its contents. It will attempt to align the paragraph with the previous and following elements. Since the paragraph is a block level element (and, so are the surrounding elements),

vertical-align: middle

will have no effect at all.

Compare this with:

<p style="font-size: 3em">...lorem ipsum <input style="vertical-align: top"> dolor sit amet...</p>
<p style="font-size: 3em">...lorem ipsum <input style="vertical-align: bottom"> dolor sit amet...</p>
<p style="font-size: 3em">...lorem ipsum <input style="vertical-align: middle"> dolor sit amet...</p>