基本 CSS 样式不适用

Question

我不知道如何将一些基本的 CSS 样式应用于我的博客。我正在尝试自定义我的博客摘要页面。我希望“阅读更多”按钮居中并正确显示图片。由于某种原因，图片一直在移动，并且将其截断了一半。我已经对不同的课程尝试了多种方法，但没有任何效果。它最初在左侧，文本在缩略图的右侧，如果这意味着什么，我会将图片移动到文本上方。

我尝试了多个 div 中按钮的文本对齐中心，但它没有让步。任何人都可以帮忙吗？我只能在我的 Squarespace 网站上调整 CSS 而不是 HTML，他们给你的有限样式不允许我调整任何这些。我不是编码员，我只是有点了解它，所以任何帮助表示赞赏。

这里是页面：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: 值当前设置为 -300 像素。我无法仅通过查看它来判断它在哪里受到影响，但是在您的样式中的某个地方，您的 excerpt-image 的子 img 得到了设置的最高值。

将您的“阅读更多”链接居中：.inline-read-more { margin: auto; }

Answer 2

我建议使用以下 CSS 将“阅读更多”按钮居中，通过 CSS Editor 插入：

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

另一方面，“截断”图像问题不应使用 CSS 来纠正，因为这是 Squarespace 的 ImageLoader 函数的问题。要更正它，请通过global Footer code injection 添加以下内容。如果您无法使用代码注入，请通过 Markdown block 在您网站的页脚中插入代码。

<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>