很抱歉打败了一匹死马,但我一生都无法理解为什么下面的方法不起作用。

  • 设置 line-height: 50px
  • 设置 vertical-align: top
  • 根据我的理解,这应该使 line-box 高 50px,然后 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 对您的情况没有影响的原因。

    HTML/CSS : Vertical aligning span with vertical-align and line-height-LMLPHP

    将值重置为 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/

    10-12 03:54