Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Jan 2005
    Posts
    140
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question DIV / CSS Question

    I am trying to recreate the following html code without using a table. I just want to use a div and css. I cannot get the text to align vertically in the middle. How can I do this? Any help is greatly appreciated.

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <
    html>
    <
    head>
    <
    title></title>

    <
    style>
    <!--
    div.red {
        
    width150px;
        
    height150px;
        
    background-color#FF0000;
        
    text-aligncenter;
        
    vertical-alignmiddle;
    }
    -->
    </
    style>
    </
    head>

    <
    body>

    <
    table border="0" cellpadding="0" cellspacing="0" width="150" height="150">
    <
    tr>
    <
    td bgcolor="#FF0000" valign="middle" align="center">Hello</td>
    </
    tr>
    </
    table>

    <
    br /><br />

    <
    div class="red">Hello</div>

    </
    body>
    </
    html
    Last edited by dlg0351; 04-28-2006 at 12:01 AM. Reason: wrong forum

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,304
    Thanks
    28
    Thanked 276 Times in 270 Posts
    First, this isn't a JavaScript question. It should be in the HTML/CSS forum.

    Second, to get that effect you need to use display: table-cell; on the div then vertical-align: middle; should work. However, Internet Explorer doesn't support this property and isn't expected to in their next browser release so to get what you want you're unfortunately probably going to have to rely on hacks.

    Third, the deprecated border, cellpadding, cellspacing, width, height, bgcolor, valign, and align attributes aren't valid in XHTML. Use CSS border-width, padding, border-collapse, width, height, background-color, vertical-align, and text-align properties, respectively, instead.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Don't make a common newbie mistake -- the point of table-less layouts is not to simply replace tables with <div> elements. The point is to use semantically correct markup and then use CSS to make it look the way you want it to.

    Center Page Content Horizontally and Vertically (without <table>s)
    Center Page Content Horizontally and Vertically (with a <table>)
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.


  •  

    Posting Permissions

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