Solved

In Paragarph: vertical alignment

Posted on 2003-10-23
9
345 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
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Popularity Can Be Measured Sometimes we deal with questions of popularity, and we need a way to collect opinions from our clients.  This article shows a simple teaching example of how we might elect a favorite color by letting our clients vote for …
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

747 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

14 Experts available now in Live!

Get 1:1 Help Now