Question

I have this in HTML:

<div class="dataBurst" title="What is the Matrix?">
    <table align="center" height="100%">
        <tr>
            <td id="matrixTD">
                <span onclick="alert('Not Yet Online');" class="coredump" 
                    title="How Would You Know the Difference Between the Dream World And the Real World?">
                    Click for System Core Dump
                </span>
            </td>
        </tr>
    </table>
</div>

The CSS I’m using:

div.dataBurst
{
    vertical-align:middle;
    width:500px;
    height:321px;
    background-color:#FFF;
    margin-left:auto;
    margin-right:auto;
    border-width:1px;
    border-style:solid;
    margin-bottom:20px;
    padding:5px;
    float:left;
    cursor:pointer;
    cursor:default;
    font-weight:normal;
    font-size:9px;

    overflow:auto;
    overflow-y: scroll;
    overflow-x: hide;
    text-align:justify;

    scrollbar-base-color:#575757;
    scrollbar-3dlight-color:#a6a6a6;
    scrollbar-track-color: #a6a6a6;
}


td#matrixTD
{
    text-align:justify;
    cursor:default; 
}

The issue is when I try to create a class/id using: <table align="center" height="100%">, it does not work; how can I implement this?

my site is at: http://guygar.com

Answer 1

After think about it for a while I think I slowly get what you are after: You want to vertically align the text “Click for System Core Dump” inside the div #dataBurst

I think you are thinking too complicate here. There is no real need to actually vertical align anything here, just give the div big top and bottom paddings:

<div class="dataBurst" title="What is the Matrix?" onclick="alert('Not Yet Online');">
     Click for System Core Dump
</div>

div.dataBurst {
    /* vertical-align:middle; -- not needed  */
    width:500px;
    padding: 150px 5px; /* First value is top/bottom, second is left/right. Adjust as neeeded. Replaces height:321px; */
    background-color:#FFF;
    text-align: center; /* replaces margin-left:auto; margin-right:auto; because you are centering inline text here. */
    border-width:1px;
    border-style:solid;
    margin-bottom:20px;
    float:left;
    cursor:pointer;
    cursor:default;
    font-weight:normal;
    font-size:9px;

    /* 
       Remove following, since there is not overflow happening here anyway,
       so the scrollbar properties also become unnecessary - and wont work 
       like this in newer IE's anyway, as they require the -ms- prefix.

    overflow:auto;
    overflow-y: scroll;
    overflow-x: hide;
    text-align:justify;

    scrollbar-base-color:#575757;
    scrollbar-3dlight-color:#a6a6a6;
    scrollbar-track-color: #a6a6a6;
    */
}

Also you need to decide which title you really want. I’ve removed the inner one, because it’s probably overridden by the outer one anyway.