Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 366
  • Last Modified:

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

0
vi_srikanth
Asked:
vi_srikanth
  • 4
  • 3
  • 2
1 Solution
 
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
 
alexgreenCommented:

dor  just a quick q, does that validate as transitional or strict or not at all?
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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
 
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
 
vi_srikanthAuthor Commented:
Thanks a lot.  It works precisely.

Srik
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 4
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now