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

的問題是，當我嘗試使用創建一個類/ ID：<table align="center" height="100%">，它不起作用;我怎樣才能實現這個？

我的網站是：http://guygar.com

Answer 1

想了一會兒，我想我慢慢的得到你所追求的後：你想垂直對齊文本「Click for System Core Dump」裏面的div #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 2

這工作。該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 3

我不確定，但是您想將表align="center" height="100%"的屬性移至css？如果是的話，那麼你必須刪除從表中的屬性，並添加一類這樣<table class="mytable">，當你這樣做，那麼在你的CSS文件中添加以下規則

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

，你可以以任何名義改變類名你喜歡（在HTML和CSS也）。