align =「center」不能與表

Question

我有這張表我想在網頁中間對齊。但它卡在頁面的左側。這是我的代碼：

<table class="tableOne" align="center"> 
    <tr > 
     <img src='Images/Header.png' /> 
    </tr> 
</table> 

代碼有什麼問題？我只需要在頁面中間的表格。

Answer 1

不要使用align="center"這不是一個標準的屬性。你可以選擇使用CSS代替。

要使用margin:auto居中表其容器內。

<style> 
    .tableOne { 
    margin:auto; 
    } 
</style> 

要居中的表格單元格內文本，使用text-align:center。

<style> 
    .tableOne td { 
    text-align:center; 
    } 
</style> 

還沒有將該<tr>裏面添加<td>。您應該始終確保表格單元格的內容在<td>之內，以便您的HTML有效。

<table class="tableOne"> 
    <tr> 
     <td> 
      <img src='Images/Header.png' /> 
     </td> 
    </tr> 
</table> 

---

作爲一個側面說明，如果你只使用表居中你的形象，你應該擺脫表。這可以被一個簡單的div取代。

HTML

<div class="center-me"> 
    <img src='Images/Header.png' /> 
</div> 

CSS

.center-me { 
    text-align:center; 
} 

Answer 2

由於@Juhana在註釋中寫道，這一問題的原因是缺乏<td>標記。你需要寫

<table class="tableOne" align="center"> 
    <tr > 
     <td><img src='Images/Header.png' /> 
    </tr> 
</table> 

一個tr可能只有th和td子元素。這不僅僅是一個正式的要求。瀏覽器解析 HTML因此，如果您嘗試有任何其他的童裝存在（即任何內容不放在th或td內），將如同它之前的表格處理。 （你可以看到這個使用開發工具，F12，在瀏覽器和檢查文檔樹。）

如果你只是要居中的圖像，有超過一個單元格的表格，例如簡單的方法只是<center><img ...></center>以及更多優雅的方式，如HTML中的<img ... class=figure>與CSS中的.figure { text-align: center }