表CSS问题

Question

我在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>

我正在使用的CSS：

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; 
}

问题是当我尝试使用：<table align="center" height="100%">创建一个类/ id时，它不起作用;我该如何实现呢？

我的网站位于：http://guygar.com

Answer 1

这有效。 HTML：

<div class="dataBurst" title="What is the Matrix?">
    <table id="table">
        <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>

和CSS：

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;
}

table#table
{ 
    margin: 0 auto; height: 100%; 

}

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

你应该删除光标：默认; 看看这里（只有 IE 5.5 不支持光标：指针; 但没有人是再使用它。）：http://www.quirksmode.org/css/cursor.html#t09

Answer 2

在考虑了一段时间之后，我想我慢慢得到你所追求的：你想在div里面垂直对齐文本“Click for System Core Dump”#dataBurst

我认为你在想这里太复杂了。实际上没有必要在这里实际垂直对齐任何东西，只需给出div大的顶部和底部填充：

<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;
    */
}

此外，您需要确定您真正想要的title。我已经移除了内部的那个，因为它可能被外部的一个覆盖了。

Answer 3

我不确定，但您想将表align="center" height="100%"的属性移动到css？如果是，那么您必须从表中删除此属性并在执行此操作时添加类似此<table class="mytable">的类，然后在您的css文件中添加以下规则

.mytable  {
    height: 100%;
    width: auto;
    margin: 0 auto;
}

你可以用你喜欢的任何名字改变类名（在html和css中）。