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

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

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

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

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对我来说效果很好：