基线垂直对齐，但在顶部

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框模型，例如margin，padding。

这是因为不同的内联块元素在基线处对齐，但它们具有不同的padding / margin设置，因此它们的文本略微垂直对齐。如果您将padding的{​​{1}}和margin以及<button>更改为相同，那么它应该有效。

<强> EDIT1

实际上，现在我想到了，您可以手动将值设置为<span>（以像素为单位）。试验它（包括负值），看看你想要什么。它取决于vertical-align和padding的{​​{1}}和margin s。

<强> EDIT2

实际上，<span>对我来说效果很好：