为什么vertical-align：text-top; 在CSS中不起作用

我想将一些文本对齐到div的顶部。似乎vertical-align: text-top;应该可以解决问题，但这是行不通的。我所做的其他事情，例如将div放入列中并显示虚线边框（这样我就可以看到div的顶部在哪里）都可以正常工作。

#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这样的块级元素产生影响。同样，text-top仅将文本移动到当前字体大小的顶部。如果您想将一个内联元素垂直对齐到顶部，请使用此选项。

vertical-align: top;

段落标记未过期。同样，应用于span元素的vertical-align属性在某些mozilla浏览器中可能无法按预期显示。

vertical-align只应该在渲染为的元素上工作inline。 <span>默认情况下呈现为内联，但并非所有元素都是如此。<p>默认情况下，段落块元素呈现为块。表格渲染类型（例如table-cell）将允许您也使用垂直对齐。

某些浏览器可能允许您对vertical-align诸如段落块之类的项使用CSS属性，但不应这样做。标记为段落的文本应填充书面语言内容，否则标记不正确，而应使用其他多个选项之一。

我希望这有帮助！

就像是

  position:relative;
  top:-5px;

只是内联元素本身对我有用。必须使用顶部才能使其垂直居中...

您可以将其应用于position: relative;div，然后position: absolute; top: 0;应用于其中包含文本的段落或跨度。

您可以使用上下文选择器，并在其中移动垂直对齐方式。然后，这将与p标签一起使用。以下面的代码段为例。您班级中的所有p标签都将遵守vertical-align控件：

#header_selecttxt {
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
}

#header_selecttxt p {
    vertical-align: text-top;
}

您还可以在两个部分中保持垂直对齐，以便其他内联元素都可以使用。

以上所有内容都不适合我，我刚刚检查了此内容及其工作：

垂直对齐：超级;

 <div id="lbk_mng_rdooption" style="float: left;">
     <span class="bold" style="vertical-align: super;">View:</span>
 </div>

我知道通过填充或边距将起作用，但这是我最后的选择。

position:absolute;
top:0px; 
margin:5px;

解决了我的问题。

您可以使用margin-top：-50％将文本一直移动到div的顶部。

margin-top: -50%;

我提供的信息无法解决我遇到的问题：

• 我将文本包含在旧学校<p>标签中。

我将更改为<p>，<span>并且效果很好。