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

2023年12月24日 506次阅读

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

编辑：这假定在对齐的元素中字体大小相同.请参阅以下@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;
}

《html – 基线垂直对齐,但在顶部》

见http://jsfiddle.net/don01001100/3t8v5L1j/3/.

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

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

EDIT1

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

EDIT2

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

《html – 基线垂直对齐,但在顶部》

点赞