WordPress 表格內容無法統一居中 解決方法

WordPress 表格內容無法統一居中

如果使用 WordPress 製作表格時,遇到的問題是表格內容無法統一居中,而緣由跟末學現在描述的差不多,那相信這篇文章幫你找出原因,並提供解決方法。

那就是語法明明就設定是整體表格內容統一居中了,在 WordPress 裡的編輯視窗也顯示正常,但為何切換到瀏覽器觀看格式就消失了!

問題

表格做好了,切換到 TEXT 看 HTML 也已經明確表示表格內所有內容居中對齊

寫法一:

<table style="text-align: center;" border="0" cellspacing="0"><colgroup width="267"></colgroup> <colgroup span="2" width="85"></colgroup>
<tbody>
...............
..............
</tbody>
</table>

寫法二:

<div style="text-align: center;">
<table style="text-align: center;" border="0" cellspacing="0"><colgroup width="267"></colgroup> <colgroup span="2" width="85"></colgroup>
<tbody>
...............
..............
</tbody>
</table>
</div>

 

在 WordPress 的編輯器裡呈現的也是居中對齊

 

但用瀏覽器查看,卻全部都靠左了!

但如果對單一欄位施行居中對齊,瀏覽器查看就會是正常的。

例如:

<td style="text-align: center;" rowspan="2" align="center" valign="middle" height="38">穿著搭配</td>

檢查編碼

goolgle了一段時間尋找答案,結果都是教學。後來用了最原始的方法,一篇一篇的看,終於看到有文章指出,有些表格問題是 WordPress 主題的 CSS 語法造成的!

所以要來看主題的編碼是怎麼回事! 回到瀏覽器點選表格欄位後,滑鼠右鍵點選檢查,瀏覽器右邊會出現檢查網頁元素的欄位

這張是單一欄位居中的元素(代碼),可以看到 element.style 是內容居中,往下看,預設的的表格模板裡,內容靠左對齊被劃掉了。

而沒有特別設定居中的欄位,可以看到 element.style 是空的,往下看,預設的的表格模板裡,內容靠左對齊。也就是說,寫在 <table style=”text-align: center;” 的這部份,被預設的 CSS 蓋掉了。

顯示 CSS 元素欄位的右上,滑鼠滑過會顯示這行 CSS 碼在哪個檔案裡,記住它。

修改主題編碼

來到 WordPress 後台,選擇外觀,然後主題編輯器,點開剛剛記住的檔案,然後收尋要找的 CSS 文字。


找到後,把 left 替換成 inherit,繼承父(母)元素的意思。最後不要忘記拉到最下面,按更新檔案,才會存入變更。

回到瀏覽器刷新頁面,就會看到表格所有內容都居中對齊了!

既然那段代碼改成了繼承,那是不是表格每次都要設定 style?! 其實不需要,因為初始設定就是靠左對齊,自己試一下就知道了。

缺點

主題每次更新後都要改一次…..

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料

返回頂端