85

我想将一些文本对齐到 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;
}
4

9 回答 9

125

垂直对齐属性仅适用于内联元素。它不会影响块级元素，例如 div。同样 text-top 仅将文本移动到当前字体大小的顶部。如果您想将内联元素垂直对齐到顶部，请使用它。

vertical-align: top;

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

于 2009-05-29T03:43:04.833 回答
25

vertical-align仅适用于呈现为inline. <span>默认情况下呈现为内联，但并非所有元素都是。段落块元素 ,<p>默认情况下呈现为块。表格渲染类型（例如table-cell）也将允许您使用垂直对齐。

某些浏览器可能允许您vertical-align在段落块等项目上使用 CSS 属性，但它们不应该这样做。以段落表示的文本应填充书面语言内容，否则标记不正确，应使用许多其他选项之一。

我希望这有帮助！

于 2009-05-31T01:52:16.170 回答
13

就像是

  position:relative;
  top:-5px;

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

于 2011-08-15T06:28:40.047 回答
4

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

于 2009-05-29T04:08:22.380 回答
1

您可以使用上下文选择器并将垂直对齐移动到那里。那么，这将与 p 标签一起使用。以下面的这个片段为例。您班级中的任何 p 标签都将尊重垂直对齐控件：

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

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

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

于 2014-06-11T20:53:43.013 回答
1

以上所有对我都不起作用，我刚刚检查了这个及其工作：

垂直对齐：超级；

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

我知道填充或边距会起作用，但这是我更喜欢的最后选择。

于 2015-09-01T06:18:44.183 回答
-1

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

margin-top: -50%;
于 2013-08-27T15:08:10.150 回答
-1 
position:absolute;
top:0px; 
margin:5px;

解决了我的问题。

于 2017-07-18T09:41:02.723 回答
-3

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

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

我改变了<p>它<span>，它工作正常。

于 2009-05-29T03:44:01.217 回答