基线垂直对齐，但在顶部

Question

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

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

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

我正在尝试做的是垂直对齐几个内联块元素中的文本，以便它们的基线都在同一位置。我宁愿不做一些像使用边距和填充来轻推的事情，因为我发现每当我这样做时，我最终都会在不同的浏览器上玩whack-a-mole。

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。

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

---

EDIT1

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

---

EDIT2

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