基本CSS样式不适用

Question

我不知道如何获取一些基本的CSS样式以应用于我的博客。我正在尝试自定义我的博客摘要页面。我希望“阅读更多”按钮居中，以使图片正确显示。由于某种原因，图片一直在移动，并且将其裁切了一半。我已经尝试过对不同的类进行多种操作，但是没有任何效果。它最初位于缩略图的左侧，文本在缩略图的右侧，如果有任何意义，我将把图片移到文本上方。

我已经尝试过将按钮在多个div中以文本对齐的方式居中，并且不会让步。有人可以帮忙吗？在我的Squarespace网站上，我只能调整CSS，而不能调整HTML，而且它们为您提供的样式有限，不允许我对其进行任何调整。我不是编码员，我只是有点理解，所以可以提供任何帮助。

这里是页面：https://www.themodernrenovator.com/blog

Answer 1

您的图像被剪切掉，因为您的top:值当前设置为-300px。我不能仅通过查看就知道它受到了什么影响，但是在样式的某个地方，您的excerpt-image子img被设置为最高值。

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

Answer 2

我建议使用以下通过CSS Editor插入的CSS将“ READ MORE”按钮居中：

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

另一方面，“截断”图像问题不应使用CSS进行纠正，因为这是Squarespace的ImageLoader函数的问题。要更正它，请通过global Footer code injection添加以下内容：

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