Results 1 to 2 of 2

Thread: CSS Vertical Alignment Question

  1. #1

    Thread Starter
    Hyperactive Member
    Join Date
    Apr 2002
    Posts
    492

    CSS Vertical Alignment Question

    If I have the following code, how come the displayed text is not vertically aligned in the space provided?

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    <head>
    	<title>Untitled</title>
    <Style>
    
    	.quote
    	{
    		position : absolute;
    		COLOR: #ac2b31;
    	    FONT-FAMILY: "Bauhaus 93", Arial, Helvetica, Verdana, sans-serif;
    		FONT-SIZE: 12pt;
    		height: 150px;
    		border: solid 2px;
    		vertical-align: middle;
    	} 
    
    </STYLE>
    </head>
    
    <body>
    <div class="quote">&quot;aaaaaa bbbbb cccccaaaaaa bbbbb ccccc
    aaaaaa bbbbb cccccaaaaaa bbbbb cccccaaaaaa bbbbb ccccc aaaaaa bbbbb ccccc
    aaaaaa bbbbb cccccaaaaaa bbbbb cccccaaaaaa bbbbb ccccc&quot;</font>
    </div>
    </body>
    </html>

  2. #2
    I'm about to be a PowerPoster!
    Join Date
    Jan 2005
    Location
    Everywhere
    Posts
    13,647

    Re: CSS Vertical Alignment Question

    Text is never vertically aligned, the only things you can use the vertical-align property on are images and table cell contents. So what you can do is make a child <div> for the text contents, set the outer div to display as a table, inner div to display as a table cell, and then you can use vertical-align. Since this is CSS 2 stuff that isn't supported in IE there is also a few hacks that only work in IE, so it should work in all browsers. Note it requires JS in IE (I'm trying to work out an alternative that does not).

    Also, I fixed up your html and CSS code a bit, remember all CSS is lower case, and your HTML should be too for maximum compatibility

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    
    <head>
        <title>Untitled</title>
        
        <style type="text/css">
            .quote
            {
                position : absolute;
                color: #ac2b31;
                font: 12pt "Bauhaus 93", Arial, Helvetica, Verdana, sans-serif;
                height: 150px;
                border: 2px solid black;
                display: table;
                width: 100%;
            }
            
            .quote div
            {
                display: table-cell;
                vertical-align: middle;
                /* for IE's eyes only: */
                _position: absolute;
                _top: expression(this.parentNode.offsetHeight / 2 - this.offsetHeight / 2);
            }
        </style>
    </head>
    
    <body>
        <div class="quote">
            <div>
                &quot;aaaaaa bbbbb cccccaaaaaa bbbbb ccccc
                aaaaaa bbbbb cccccaaaaaa bbbbb cccccaaaaaa bbbbb ccccc aaaaaa bbbbb ccccc
                aaaaaa bbbbb cccccaaaaaa bbbbb cccccaaaaaa bbbbb ccccc&quot;
            </div>
        </div>
    </body>
    
    </html>

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width