html - 当第二行使用 span 元素时，对齐两行文本的正确 html 代码是什么？

Question

我正在尝试使用 html 代码格式化两行文本。这些用于描述艺术作品的 WP metaslider 标题。

文本的第一行是一个简单的标题。

第二行文字分为两部分:

• 对所用媒体的集中描述，
• 照片出处，以较小的字体右浮动，因此与其余文本分开但位于同一第二行，因为我需要节省空间。

我在第二行使用了 span 来分隔这两部分文本。

这几乎可以工作，但是第一行的文本和第二行的第一部分的文本没有相互居中。

代码如下:

<p style="text-align: center; font-family: LATO; font-size: 12px;">« L'oiseau »
<p style="text-align: center; font-family: LATO; font-size: 10px;">Pierre calcaire
<span style="float: right; font-family: LATO; font-size: 7px;">Photo : Peter Pan</span>
</p>

我找到了一个解决方法，即在第二行的第一部分添加 -70 像素的文本缩进，但由于我有许多幻灯片具有类似的标题格式，所以我需要一种更简洁的方法。

如有必要，我可以将 css 添加到我的样式表中。

非常感谢您的宝贵时间，

波莉

Answer 1

在包含的 P 标签上使用行高。

<p style="text-align: center; font-family: LATO; font-size: 12px;">« L'oiseau »
<p style="text-align: center; font-family: LATO; font-size: 10px; line-height: 16px">Pierre calcaire
<span style="float: right; font-family: LATO; font-size: 7px;">Photo : Peter Pan</span>
</p>