我的程式, 我的觀點

標籤: margin

調整一下Youtube影片在站內未能居中問題

一個在站內困擾許久的問題, 一直沒有處理, 就是在 youtube 影片 embed 在本站裡, 對應目前 Twenty Twenty Theme的狀況下, 會發生靠左的問題.

檢查了一下, 原來是會自動在 iframe 前的 p 會加上 style=”margin: 0px;” 這樣的屬性, 由於是 inline 的 CSS, 所以目前暫時的解法是透過以下 CSS:

div.entry-content p[style="margin: 0px;"] {
   margin-left: auto !important;
   margin-right: auto !important;
}

其中的 div.entry-content 是 WordPress 的文章內容, 而使用後面的 p margin: 0px; 選擇器來找出 margin 為 0 的 p 段落, 並使用 !important 的語法來強迫 margin-left 與 margin-right 為 auto.

目前測試狀況良好, 若有什麼問題或建議請再留言給我!

有內嵌影片的文章可以看一下:

Wordpress

使用 Enlighter 用來做在 WordPress 中顯示程式碼的高亮語法十分方便好用. 不過在 TwentyTwenty Theme 中, 會靠到最左側, 導致閱讀不順利, 檢查一下是 css margin 的問題.

不過在 Enlighter plugin 有回報與解法:

只需要自訂 css 中增加:

.enlighter-default{
    margin: 0 auto 1.25em auto;
}

就可以了!

PS. 若在 multi-site環境下的 wordpress , 另外需要這個 plugin 來達成 custom css (附加css) 的功能: https://wordpress.org/plugins/multisite-custom-css/