将雨果网站上的文字与图片对齐

Question

我在Hugo网站上使用axiom主题：https://l1ge.github.io/leviathan2/与主题示例不同，我在帖子顶部放了一个较小的图像，它是我自己调整大小的jpeg。因此，标题与图像不对齐，并且我找不到使它对齐的方法。我的博客的源代码为here

有人可以帮我找到办法吗？谢谢

Answer 1

我能想到的一种解决方法是，定义一个新的CSS类规则，然后在所需的任何地方使用它，在本例中为标题图像。

.w-100 {
  width: 100% !important;
}

将此类用于您的标签。

<figure>
  <img class="other-classes w-100" src="...">
  <figcaption></figcaption>
</figure>

说明：我们为类“ w-100”定义了CSS规则，该规则使给定元素的宽度等于其容器/父元素的宽度。 “！重要”是要确保没有其他规则可以覆盖此规则。