基本 CSS 样式不适用

Question

我不知道如何获得一些基本的 CSS 样式以应用于我的博客。我正在尝试自定义我的博客摘要页面。我希望 "read more" 按钮居中并使图片正确显示。由于某种原因，图片一直在移动，它把它剪掉了一半。我已经尝试了多种不同的类，但没有任何效果。它最初位于缩略图的左侧，文本位于缩略图的右侧，如果这意味着什么，我将把图片移到文本上方。

我试过在多个 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 正在设置最高值。

要使您的 'read more' link 居中：.inline-read-more { margin: auto; }

Answer 2

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

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

另一方面，"cut off" 图像问题不应该用 CSS 更正，因为它是 Squarespace 的 ImageLoader 函数的问题。要更正它，请通过 global Footer code injection. If code injection is not available to you, insert the code via a 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>

基本 CSS 样式不适用

Basic CSS styles not applying

css

image

button

squarespace