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

LVL 4
vi_srikanthAsked:
Who is Participating?
 
dorwardCommented:
Yes - add vertical-align: middle; to each of your existing styles as I said (although you will also have to do something about the pipes).

<p>
<span style=:vertical-align: middle;">|</span> <span style="font-size:40pt;vertical-align: middle;">Some</span>
<span style=:vertical-align: middle;">|</span> <span style="font-size:10pt;vertical align: middle;">Text</span>
<span style=:vertical-align: middle;">|</span> <span style="font-size:20pt;vertical-align: middle;">FinalText</span>
</p>
0
 
alexgreenCommented:
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
0
 
dorwardCommented:
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 %)
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
alexgreenCommented:

dor  just a quick q, does that validate as transitional or strict or not at all?
0
 
dorwardCommented:
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)
0
 
alexgreenCommented:
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)
0
 
dorwardCommented:
I WAS suggesting adding vertical-align: middle to each span.
0
 
vi_srikanthAuthor Commented:
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.
0
 
vi_srikanthAuthor Commented:
Thanks a lot.  It works precisely.

Srik
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.