垂直居中 <span> 文本，位于更大的 <span> 旁边，都在 <div> 内

Posted 2023-03-05

【中文标题】垂直居中 <span> 文本，位于更大的 <span> 旁边，都在 <div> 内

【英文标题】：Vertically center <span> text which is beside a much larger <span>, both inside a <div>

【发布时间】：2014-03-20 06:10:34

【问题描述】：

我试图将<span> 元素中的一些文本垂直居中，相对于更大的<span>，它是第一个元素的兄弟。两者都是包含父元素 <div> 的子元素。

html：

<div>
    <span class="previewLabel">Preview:</span>
    <span class="previewText">The quick brown fox jumps over the lazy dog.</span>
</div>

CSS：

.previewLabel 
    display: inline-block;
    line-height: 100%;
    vertical-align: middle;


.previewText 
    font-family: Verdana, Geneva, sans-serif;
    font-size: 64px;
    font-style: italic;
    font-weight: bold;

JSFiddle：http://jsfiddle.net/5chXG/

如您所见，我已经尝试了this Q&A ("Text vertical align in a div") 中描述的vertical-align 技巧（定义了line-height），但它似乎不起作用。我认为不同之处在于我不能使用静态的line-height 值。

我不能为line-height 属性使用px 值，因为.previewText 跨度可以动态更改大小。在实际代码中，页面上有控件可以更改字体属性，而 javascript 会在您更改内容时调整 .previewText 的 CSS。

我的问题：

如何使“预览：”文本 (.previewLabel) <span> 在父 <div> 元素的中间垂直对齐？

编辑/澄清

我希望 所有 文本的行为与通常的单行文本一样。

换行应使大文本在小文本下方流动。 较小的文本只能在单行较大文本的高度内垂直对齐，而不是多行

这是我想要实现的目标的可视化：

【问题讨论】：

你的意思是这样jsfiddle.net/j08691/5chXG/1?

@j08691 有点，但这使它看起来像 2 个不同的元素。我希望它看起来像一条连续的线。所以大文本仍然会包裹在小文本下面，而小文本只会垂直对齐到 1 行大文本的中间。希望这是有道理的......

将 vertical-align: middle 更改为 vertical-align: baseline

【参考方案1】：

将vertical-align:middle 添加到.previewLabel 和.previewText 就可以了。

这是一个证据：http://jsfiddle.net/pavloschris/5chXG/4/

【讨论】：

谢谢，但这并不是我想要的。抱歉，如果我的问题不清楚。我希望所有文本都像 1 行一样流动。见this comment。

那你应该把vertical-align:middle 加到他们两个上，这不适合你吗？

确实，将vertical-align:middle 添加到两个跨度似乎可以解决问题！您以前版本的答案/小提琴对我来说看起来不正确，所以我认为这是错误的，抱歉。谢谢！

另外，你能解释一下为什么这行得通吗？我不希望需要垂直对齐作为容器全高的元素。为什么会有所作为？

简单来说，vertical-align 描述了inline-elements 并排放置时相互垂直对齐的方式。它与它们的父元素无关。

【参考方案2】：

如果您希望左侧单行文本与右侧多行文本的第一行对齐，则需要使用vertical-align: baseline 而不是vertical-align: middle 以及display: table-cell。 .previewLabel 不需要设置行高。

DEMO

.previewLabel 
    vertical-align: baseline;


span 
    display:table-cell;

【讨论】：

您的演示正在使“previewText <span>act”中的文本与标签的文本行不同。我希望它像单行一样文本。见this comment。

另外，在我的浏览器 (Firefox) 中，“预览：”文本仍然没有在中间垂直对齐；它仍然出现在行的底部。

是的，根据您的解释，我认为您希望它与第一行的底部对齐。您包含的那张图片将帮助我更好地了解您在寻找什么。很高兴您能得到有用的答案。