html - 独立于段落的文字说明文本设置

Question

我有以下段落，旁边有图片，我需要在每张图片上都有一个“figcaption”。我需要使用独立设置来设置“figcaption”文本。我该怎么做？

此外，我不确定在我的 HTML 中是否正确使用了 figcaption 标签:

<p><figure><span class="image right"><img src="images/scania_old.jpg" alt="Stoptrans first truck" /><figcaption>Stoptrans first truck in the 80's</figcaption></span></figure>Vestibulum ultrices risus velit, sit amet.</p>

我的 image.right 和 image.left 类有这样的设置:

.image.right {
            float: right;
            margin: 0 0 1em 1.5em;
            top: 0.25em;
        }

.image.left {
            float: left;
            margin: 0 1.5em 1em 0;
            top: 0.25em;
        }

我需要我的 figcaption 才能使用此设置:

            font-size: 75%;
            font-style: italic;
            text-align: center;

Answer 1

您可以像对待任何其他标签一样对待 figcaption 标签，方法是将样式应用于 figcaption 类型标签或在您的 html 中为其赋予 class 属性。

将样式应用于 figcaption:

figcaption {
font-size: 75%;
font-style: italic;
text-align: center;
}

使用类属性:

<figcaption class="example">Stoptrans first truck in the 80's</figcaption>

.example {
font-size: 75%;
font-style: italic;
text-align: center;
}