Newbie Doubt: Text Vertical Alignment CSS?

hemanthjava · 09-07-2011, 08:07 AM

Hello,

I am a newbie to CSS and have a Doubt. In the below HTML File, <span class="plain">Plain text</span has a Plain Formatting with just a Color Change to be made via CSS .plain {color:#FF0000;}

My Question is Why does that part also join the remaining text in Vertical Alignment as the span for the "Plain Text" text is <span class="plain">Plain text</span>?

What I mean is only the remaining part of the Text after the words "Plain Text" must participate in Vertical Alignment and not the whole sentence?

This is the CSS File

Code:

/* Style sheet for ch07_eg09.html */

body {
   color:#000000;
   background-color:#ffffff;
   font-family:arial, verdana, sans-serif; 
   font-size:12px;}

div {border-style:solid; border-width:1px; border-color:#000000; width:200px; margin-bottom:10px;}

.plain {color:#FF0000;}
.baseline {vertical-align:baseline;}
.sub {vertical-align:sub;}
.super {vertical-align:super;}
.top {vertical-align:top;}
.texttop {vertical-align:text-top;}
.middle {vertical-align:middle;}
.bottom {vertical-align:bottom;}
.textbottom {vertical-align:text-bottom;}
.oneHundredPercent {vertical-align:100%;}
.fiftyPercent {vertical-align:50%;}

This is the HTML File

Code:

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
  <title>CSS Example</title>
  <link rel="stylesheet" type="text/css" href="ch07_eg09.css" />
</head>

<body>
<h1>vertical-align</h1>

<div>
    <span class="plain">Plain text</span> <span>no vertical align</span><img class="baseline" src="images/block.gif" width="50" height="50" alt="block" />
</div>
<div>
    <span class="plain">Plain text</span> <span class="baseline">baseline</span><img class="baseline" src="images/block.gif" width="50" height="50" alt="block" />
</div>
<div>
    <span class="plain">Plain text</span> <span class="sub">sub</span><img class="sub" src="images/block.gif" width="50" height="50" alt="block" />
</div>
<div>
    <span class="plain">Plain text</span> <span class="super">super</span><img class="super" src="images/block.gif" width="50" height="50" alt="block" />
</div>
<div>
    <span class="plain">Plain text</span> <span class="top">top</span><img class="top" src="images/block.gif" width="50" height="50" alt="block" />
</div>
<div>
    <span class="plain">Plain text</span> <span class="texttop">texttop</span><img class="texttop" src="images/block.gif" width="50" height="50" alt="block" />
</div>
<div>
    <span class="plain">Plain text</span> <span class="middle">middle</span><img class="middle" src="images/block.gif" width="50" height="50" alt="block" />
</div>
<div>
    <span class="plain">Plain text</span> <span class="bottom">bottom</span><img class="bottom" src="images/block.gif" width="50" height="50" alt="block" />
</div>
<div>
    <span class="plain">Plain text</span> <span class="textbottom">textbottom</span><img class="textbottom" src="images/block.gif" width="50" height="50" alt="block" />
</div>
<div>
    <span class="plain">Plain text</span> <span class="oneHundredPercent">100%</span><img class="100percent" src="images/block.gif" width="50" height="50" alt="block" />
</div>
<div>
    <span class="plain">Plain text</span> <span class="fiftyPercent">50%</span><img class="50percent" src="images/block.gif" width="50" height="50" alt="block" />
</div>

</table>
</body>
</html>

Thanks,
Hemanth