Wednesday, February 28, 2007
| Main | SQL Server 2005 change password  »
vertical-align is for inline child elements

Maybe that is easy for some css gurus to remember, but I always have trouble getting it to work. Use the style vertical-align: top to align inline children elements of a block parent.

Here is a sample that should illustrate:

<!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" >
<head >
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
    <title>Text Align Test</title>
</head>
<body>
    <div>
   
    <div style="height: 100px; width: 300px; background-color: teal; vertical-align: top;">
            <span style="background-color: red; font-size: 28px;">Align This</span>
            <span style="background-color: #00A4FF;">Inline</span><br />
            Next Line
    </div>
   
    <div style="height: 100px; width: 300px; background-color: teal;">
            <span style="background-color: red; font-size: 28px;">Align This</span>
            <span style="background-color: #00A4FF; vertical-align: top;">Inline</span><br />
            Next Line
    </div>
    </div>
</body>
</html>

Posted By: Chris Burkhardt on February 28, 2007  #    Disclaimer  |  Comments [0]  | 
Comments are closed.