Table of Contents
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>
但如果對單一欄位施行居中對齊,瀏覽器查看就會是正常的。
例如:
<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?! 其實不需要,因為初始設定就是靠左對齊,自己試一下就知道了。
缺點
主題每次更新後都要改一次…..