Question

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

Answer 1

vertical-align属性仅适用于内联元素。它对块级元素没有影响，比如div。 text-top也只将文本移动到当前字体大小的顶部。如果您想将内联元素垂直对齐到顶部，请使用此。

vertical-align: top;

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

Answer 2

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

某些浏览器可能允许您对诸如段落块之类的项目使用vertical-align CSS属性，但它们不应该使用。表示为段落的文本应填充书面语言内容或标记不正确，并应使用其他一些选项。

我希望这有帮助！

Answer 3

类似

  position:relative;
  top:-5px;

只是在内联元素本身适合我。必须玩顶部才能使它垂直居中...

Answer 4

您可以将position: relative;应用于div，然后将position: absolute; top: 0;应用于包含该文本的段落或内部。

Answer 5

您可以使用上下文选择器并在那里移动vertical-align。这将适用于p标签。以下面的这个片段为例。类中的任何p标签都将遵循垂直对齐控件：

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

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

您还可以在两个部分中保持vertical-align，以便其他内联元素可以使用它。

Answer 6

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

vertical-align：super;

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

我知道padding或margin会起作用，但这是我喜欢的最后选择。

Answer 7

.book-find-tenant-head {
    font-family: 'Roboto', 'Arial', 'sans-serif', 'Arial Narrow'; 
    font-weight:bold;
    text-align:center;
    font-size: 16px;
    font-weight: bold;
    display: inline-block; 
    vertical-align: middle;
    background-color: #337AB7;
    color:#FFFFFF;
    height:40px;
    line-height: 40px;
    width: 100%;
}
md-button.md-icon-button {
    position: absolute;
    right: 20px;
}

解决了我的问题。

Answer 8

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

margin-top: -50%;

Answer 9

我遇到的问题无法从我提供的信息中找出：

我的文字附在旧学校标签中。

我将更改为，效果很好。

为什么是vertical-align：text-top;不在CSS中工作

9 个答案: