Question

我正在尝试将两个不同字体大小的文本元素对齐到彼此的基线，但也将同一行中的图像对齐到底部。我遇到的问题是，如果两个中只有一个存在整体对齐更改，这可能会在使用javascript添加和删除元素时导致刺耳的效果。

我想设置它以使每个元素的基线与其底部之间的距离相同，这样哪个元素与图像共享线条无关紧要。也许有一些预处理可以根据行高和字体大小来计算字体的基线？

.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。

Answer 1

如果我正确理解了您的问题，您只需要为您的文字添加vertical-align:bottom;（我在这里通过span标记进行操作，因为这似乎是您尝试做的事情。）：

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

Answer 2

如果你添加：

.line * { vertical-align: bottom; }

并删除线下的位置＆gt;跨度

.line > span {
    background: #ccc;
}

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

Answer 3

如果我正确理解了你想要达到的目标，只需将行高移动到.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;
}

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

3 个答案: