为什么是vertical-align：text-top;不工作在CSS [英] Why is vertical-align:text-top; not working in CSS

问题描述

我想将一些文本对齐到div的顶部。看起来 vertical-align：text-top; 应该做的伎俩，但它不工作。我做过的其他事情，例如把div放入列和显示一个虚线边框（所以我可以看到div的顶部是什么）。

I want to align some text to the top of a div. It seems that vertical-align: text-top; should do the trick, but it doesn't work. The other things that I have done, such as putting the divs into columns and displaying a dashed border (so I can see where the top of the div is) all work fine.

#header_p { 
    font-family: Arial;
    font-size: 32px;
    font-weight: bold;
}
#header_selecttxt {
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    vertical-align: text-top;
}
#header_div_left { 
    float: left; 
    width: 50%;
    border: dashed;
    vertical-align: top;
}
#header_div_right { 
    margin-left: 50%;
    width: 50%;
    border: dashed;
}

推荐答案

vertical-align属性仅用于内联元素。它对块级元素没有影响，如div。此外，文本顶部仅将文本移动到当前字体大小的顶部。如果你想垂直对齐一个内联元素到顶部只是使用这个。

The vertical-align attribute is for inline elements only. It will have no effect on block level elements, like a div. Also text-top only moves the text to the top of the current font size. If you would like to vertically align an inline element to the top just use this.

vertical-align: top;

段落标签不过时。此外，应用于span元素的vertical-align属性在某些mozilla浏览器中可能无法按预期显示。

The paragraph tag is not outdated. Also, the vertical-align attribute applied to a span element may not display as intended in some mozilla browsers.

这篇关于为什么是vertical-align：text-top;不工作在CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！