很抱歉打败了一匹死马,但我一生都无法理解为什么下面的方法不起作用。
line-height: 50px
vertical-align: top
vertical-align
应该,according to MDN,能够在其中移动内联元素。 具体来说:
我试过这两个:
<span style="line-height: 50px; border: 1px solid red; vertical-align: bottom">Some text</span>
和这个:
<div style="line-height: 50px; border: 1px solid yellow">
<span style="border: 1px solid red; vertical-align: bottom">Some text</span>
</div>
这是我希望将跨度定位在底部的最后一个版本。它说 line-box 应该是 50px,然后
vertical-align
用于子 span
。PS:请不要只说“使用 flexbox”或类似的。我想了解内部工作原理/从概念上讲为什么上面没有将跨度定位在行的底部。
最佳答案
你说的一切都是对的,但你只是忘记了 继承 的东西。 span 元素在 div 上定义了相同的行高,这就是为什么 bottom
对您的情况没有影响的原因。
将值重置为 initial
它将起作用。
<div style="line-height: 50px; border: 1px solid yellow">
<span style="border: 1px solid red; vertical-align: bottom;line-height:initial;">Some text</span>
</div>
关于HTML/CSS : Vertical aligning span with vertical-align and line-height,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/50200520/