Solved

In Paragarph: vertical alignment

Posted on 2003-10-23
9
351 Views
Last Modified: 2010-04-09
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

0
Comment
Question by:vi_srikanth
  • 4
  • 3
  • 2
9 Comments
 
LVL 3

Expert Comment

by:alexgreen
ID: 9604930
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
 
LVL 17

Expert Comment

by:dorward
ID: 9605070
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
 
LVL 3

Expert Comment

by:alexgreen
ID: 9605079

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

Expert Comment

by:dorward
ID: 9605110
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 3

Expert Comment

by:alexgreen
ID: 9605154
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
 
LVL 17

Expert Comment

by:dorward
ID: 9605183
I WAS suggesting adding vertical-align: middle to each span.
0
 
LVL 4

Author Comment

by:vi_srikanth
ID: 9605273
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
 
LVL 17

Accepted Solution

by:
dorward earned 50 total points
ID: 9605309
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
 
LVL 4

Author Comment

by:vi_srikanth
ID: 9605418
Thanks a lot.  It works precisely.

Srik
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Find out what you should include to make the best professional email signature for your organization.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

920 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now