Solved

In Paragarph: vertical alignment

Posted on 2003-10-23
9
361 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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
 
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
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…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

635 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