html设置顶部对齐,html – 基线垂直对齐,但在顶部

我试图获得类似于基线的垂直对齐,但是在文本的第一行而不是最后一行.顶部和文本顶部都没有正确对齐.有任何想法吗？谢谢！

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

编辑：现在使用代码示例和图片：

我要做的是垂直对齐几个内联块元素中的文本,使它们的基线都处于相同的位置.我宁愿做一些像利用边距和填充来推动事情的事情,因为无论什么时候我发现,我最终都会用不同的浏览器来玩傻瓜.

one

two two two two

three three three three three three three three three

action

one

two two two two

three three three three three three three three three

action

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;

}

最佳答案 我担心你只能使用CSS盒子模型,比如边距,填充.

这是因为不同的内联块元素在基线处对齐,但它们具有不同的填充/边距设置,因此它们的文本略微垂直对齐.如果您将< button> s和< span> s的填充和边距更改为相同,那么它应该可以工作.

EDIT1

实际上,现在我想起来了,您可以手动将值设置为vertical-align(以像素为单位).试验它(包括负值),看看你想要什么.它将取决于< span>和< div>的填充和边距.

EDIT2

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