基本 CSS styles 不適用

Question

我不知道如何獲得一些基本的 CSS styles 以應用於我的博客。 我正在嘗試自定義我的博客摘要頁面。 我希望“閱讀更多”按鈕居中並正確顯示圖片。 由於某種原因，圖片一直在移動，並且將其截斷了一半。 我已經對不同的課程嘗試了多種方法，但沒有任何效果。 它最初位於左側，文本位於縮略圖右側，如果這意味着什么，我將把圖片移到文本上方。

我已經嘗試了多個 div 中按鈕的文本對齊中心，但它沒有讓步。 任何人都可以幫忙嗎？ 我只能在我的 Squarespace 網站上調整 CSS 而不是 HTML，而且他們給你的有限的 styles 不允許我調整任何這些。 我不是編碼員，我只是有點理解它，所以任何幫助表示贊賞。

這是頁面： https://www.themodernrenovator.com/blog

這是我添加的自定義 CSS 以使按鈕成為圓形，但無法使其居中：

  text-align: center;
  display: table;
  width: 100px;
  border-radius: 30px;
  padding: 12px !important;
  background-color: #f0ede9;
  margin: auto;
}
.view-list article .excerpt-thumb {
  width: 100%;
  position: inherit;
}

.view-list article .excerpt-thumb .intrinsic .content {
  position: inherit;
  padding-bottom: 0px;
}
.intrinsic {
  padding: 0px !important;
}
.entry-title {
  text-align: center;
}
.article-dateline {
  text-align: center;
}
article .post span.inline-action {
  display: inline-block;
  text-align: center;
}
.article-meta {
  display: none;
}

Answer 1

您的圖像被截斷，因為您有一個top:當前設置為 -300px 的值。 我無法僅通過查看它來判斷它在哪里受到影響，但是在您的樣式中的某個地方，您的excerpt-image的子 img 獲得了設置的最高值。

將您的“閱讀更多”鏈接居中： .inline-read-more { margin: auto; } .inline-read-more { margin: auto; }

Answer 2

我建議使用通過CSS 編輯器插入的以下 CSS 將“閱讀更多”按鈕居中：

article .post span.inline-action {
  display: inline-block;
  text-align: center;
}

另一方面，不應使用 CSS 糾正“截斷”圖像問題，因為這是 Squarespace 的 ImageLoader function 的問題。 要更正它，請通過global Footer code injection添加以下內容。 如果您無法使用代碼注入，請通過您網站頁腳中的Markdown 塊插入代碼。

<script>
// Fix Squarespace ImageLoader Bug.
function fixImages() {
  var images = document.querySelectorAll('img[data-src]');
  var i = images.length;
  while (i--) {
    ImageLoader.load(images[i], {load: true});
  }
}
fixImages();
window.Squarespace.onInitialize(Y, function() {
  fixImages();
});
</script>