asked on

In Paragarph: vertical alignment

Hi

I have my paragraph like this:

<p>
<span style="font-size:40pt;">Some</span>
<span style="font-size:10pt;">Text</span>
<span style="font-size:20pt;">FinalText</span>
</p>

There are text of different sizes in this paragraph. In the browser output all the text in a paragraph are aligned to bottom. Is there any way by which I can have the vertical alignment as middle, so that the text with smaller font size will come in the middle? I think it is not possible!!! But, if there is any way could u help me out?

Thanks
Srik

alexgreen

You may be confusing vertical-align applied to table cells with vertical align for "text" or "inline boxes." Try this code to illustrate the point:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>CSS text: vertical-align values</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
body {
margin:0;
padding:0;
height:100%;
font:1em verdana, arial, sans-serif;
background:#999;
}
div.content {
margin-top:5%;
margin-right:8%;
margin-left:8%;
height:5em;
line-height:1.2em;
text-align:center;
padding:2em;
background:#fff;
}
span.mid {
vertical-align:middle;
background:#e0ffff;
}
span.sub {
vertical-align:sub;
background:#ffe4e1;
}
span.super {
vertical-align:super;
background:#98fb98;
}
</style>
</head>

<body>
<div class="content">
This is a baseline test: <span
class="mid">this is vertical-align:middle</span>
</div>

<div class="content">
<span class="sub">This is vertical-align:sub</span> <span
class="mid">this is vertical-align:middle</span> <span class="super">this is
vertical-align:super</span><br />
</div>

<div class="content">
This is a test<br />
This is a test<br />
This is a test
</div>

<div class="content">
This is a test<br />
This is a test<br />
This is a test
</div>
</body>
</html>

As you can see, padding may be applied to provide the vertical spacing you are seeking. You can learn more about these css properties here:

http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-vertical-align
http://www.w3.org/TR/REC-CSS2/visuren.html#anonymous
http://www.w3.org/TR/REC-CSS2/tables.html#propdef-table-layout
http://www.w3.org/TR/REC-CSS2/box.html#propdef-padding
http://www.w3.org/TR/REC-CSS2/box.html
Tables are meant for tabular data. If this is what you are presenting then tables are called for. Tables are not meant for page layouts: use CSS for presentation purposes.

Best of luck!

credit to http://www.siteexperts.com/forums/viewConverse.asp?d_id=9934&Sort=0 for providing this solution

dorward

Just add "vertical-align: middle;" to each style. (But I suggest you avoid points for units, they cause more trouble then they are worth - stick to relative units like em or %)

alexgreen

dor just a quick q, does that validate as transitional or strict or not at all?

dorward

Its CSS, CSS doesn't have transitional or strict.

The origional HTML is valid in Strict (although it appears to have negative semantic value), and the CSS is valid (and only used on elements to which it should apply)

alexgreen

of course, sorry, i misread it, thinking you were suggesting adding the "vertical-align: middle;" to each <span>
my bad
your good advice

me
^
||
||
_=_
|=| U |=|
| ( oo ) |
| ~ |
| |
||||||||| FLUSH!!!!!
| |
| |
___|______|___

(invert head to view screen)

dorward

I WAS suggesting adding vertical-align: middle to each span.

vi_srikanth

ASKER

I'm sorry. I think I haven't made it clear. I want output like the following:

|
| | |
| | | | | |
| | |
|

In the above 5"|" means the font size is 40pt, for 5"|" it is 20pt and for 1"|" it is 10pt.

All these text are present in a single paragraph. Is there a way by which I can get the output similar to above?

If I'm still not clear please tell me.

ASKER CERTIFIED SOLUTION

dorward

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

vi_srikanth

ASKER

Thanks a lot. It works precisely.

Srik