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

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. <span>默认情况下呈现为内联,但不是所有元素都是.段落块元素,<p>默认情况下呈现为块.表格渲染类型(例如table-cell)也允许您使用vertical-align.

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

我希望这有帮助!

Answer 3

就像是

  position:relative;
  top:-5px;

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

Answer 4

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