基线垂直对齐，但在顶部

Question

我试图获得类似于基线的垂直对齐方式，但在文本的第一行而不是最后一行。top两者都没有正确text-top对齐。有任何想法吗？谢谢！

编辑：这假设对齐的元素中的字体大小相同。请参阅下面 @FelipeAls 对已接受答案的评论。

编辑：现在带有代码示例和图片：

我想做的是垂直对齐几个内联块元素中的文本，以便它们的基线都位于相同的位置。我宁愿不做类似使用边距和填充来推动事物的事情，因为我发现每当我这样做时，我最终都会在不同的浏览器上玩打地鼠游戏。

HTML：

<div class="foo">
    <span>one</span>
    <span>two two two two</span>
    <span>three three three three three three three three three</span>
    <button type="button">action</button>
</div>

<div class="bar">
    <span>one</span>
    <span>two two two two</span>
    <span>three three three three three three three three three</span>
    <button type="button">action</button>
</div>

CSS：

body {
    font-family: sans-serif;
    font-size: 12px;
}

button {
    font-family: inherit;
    font-size: inherit;
}

div {
    position: relative;
    width: 500px;
    text-align: center;
}

div.foo, div.bar {
    margin-bottom: 2em;
}

div span {
    text-align: center;
}

div.foo span {
    display: inline-block;
    width: 50px;
    vertical-align: top;
}

div.bar span {
    display: inline-block;
    width: 50px;
    vertical-align: baseline;
}

div button {
    display: inline-block;
    width: 125px;
}

请参阅http://jsfiddle.net/don01001100/3t8v5L1j/3/。

Answer 1

恐怕你只能使用 CSS box-model 来做到这一点，例如margin, padding。

这是因为不同的内联块元素在基线处对齐，但它们具有不同的padding/margin设置，因此它们的文本在垂直方向上稍微偏离。如果将s 和s的paddingand更改为相同，那么它应该可以工作。margin<button><span>

编辑1

实际上，现在我想到了，您也许可以手动将值设置为以vertical-align像素为单位。尝试一下（包括负值）看看你想要什么。这将取决于paddings 和margins 的<span>s 和<div>s。

编辑2

事实上，vertical-align: text-top对我来说效果很好：