将一些元素与基线对齐，将其他元素与底部对齐答案

【问题标题】：Align some elements to baseline and others to bottom将一些元素与基线对齐，将其他元素与底部对齐
【发布时间】：2014-12-01 07:11:15
【问题描述】：

我正在尝试将具有不同字体大小的两个文本元素与彼此的基线对齐，但还将同一行中的图像与其底部对齐。我遇到的问题是，如果两者中只有一个存在，则整体对齐方式会发生变化，这会在使用 javascript 添加和删除元素时产生不和谐的效果。

我想设置它，使每个元素的基线和它的底部之间的距离相同，这样什么样的元素与图像共享线无关紧要。也许我可以做一些预处理来根据 line-height 和 font-size 计算字体的基线？

.line {
    font-size: 15px;
}
.line > span {
    background: #ccc;
    display: inline-block;
    line-height: 30px;
    vertical-align: baseline;
}
.line > .b {
    font-size: 30px;
}
img {
    height: 50px;
    vertical-align: bottom;
    width: 50px;
}

这是jsfiddle that demonstrates the problem。

【问题讨论】：

看看 display: table-cell 和 display: table-row。这对对齐那些东西很有好处。更新小提琴：jsfiddle.net/k48muk5e/2

标签： css vertical-alignment

【解决方案1】：

如果我正确理解了你的问题，你只需要在你的文本中包含：vertical-align:bottom;（我在这里通过 span 标签来做，因为这似乎是你想要做的。）：

.line > span {
    background: #ccc;
    display: inline-block;
    vertical-align: bottom;
}

【讨论】：

我希望文本的基线也对齐。
@theazureshadow 你确定吗？具有对齐基线的不同大小的字体看起来很奇怪。这是基于您的代码的三个不同的小提琴。它们中的任何一个看起来像你想要的吗？ jsfiddle.net/k48muk5e/19（所有底部匹配）、jsfiddle.net/k48muk5e/20（文本基线匹配且图像位于文本底部）、jsfiddle.net/k48muk5e/21（文本基线匹配且图像匹配父文本底部）。
@theazureshadow 我认为需要注意的重要一点是，“基线”是文本的底部，而不考虑低于基线的 p 和 q 等字符。

【解决方案2】：

如果你添加：

.line * { vertical-align: bottom; }

并删除线下的位置> span

.line > span {
    background: #ccc;
}

这会将所有元素对齐到底部，这是您想要的吗？

【讨论】：

没有。基本上，我希望文本基线和文本元素底部之间的距离相同。如果这是真的，那么我可以使用 vertical-align: bottom 对齐所有内容。
不确定你到底想要什么。也许您可以将它们显示为内联块并使用底部边距作为间距？如果字体大小是可变的，请在“em”中指定它，它将缩放到字体大小。
您能否提供一张您想要实现的目标的图片？

【解决方案3】：

如果我正确理解您想要实现的目标，只需将 line-height 移至 .line：

div {
    margin: 10px 0;
}
.line {
    font-size: 15px;
    line-height: 30px;
}
.line > span {
    background: #ccc;
    display: inline-block;
    vertical-align: baseline;
}
.line > .b {
    font-size: 30px;
}
img {
    height: 50px;
    vertical-align: bottom;
    width: 50px;
}

【讨论】：