为什么是vertical-align:text-top; 不在 CSS 中工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/924282/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why is vertical-align:text-top; not working in CSS
提问by Ankur
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.
我想将一些文本与 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;
}
回答by
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 属性仅用于内联元素。它不会影响块级元素，例如 div。此外 text-top 仅将文本移动到当前字体大小的顶部。如果您想将内联元素垂直对齐到顶部，请使用它。
vertical-align: top;
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.
段落标签并没有过时。此外，应用于 span 元素的 vertical-align 属性在某些 mozilla 浏览器中可能无法按预期显示。
回答by mechler
vertical-alignis only supposed to work on elements that are rendered as inline. <span>is rendered as inline by default, but not all elements are. The paragraph block element, <p>, is rendered as a block by default. Table render types (e.g. table-cell) will allow you to use vertical-align as well.
vertical-align仅适用于呈现为inline. <span>默认情况下呈现为内联，但并非所有元素都是。<p>默认情况下，段落块元素呈现为块。表格渲染类型（例如table-cell）也允许您使用垂直对齐。
Some browsers may allow you to use the vertical-alignCSS property on items such as the paragraph block, but they are not supposed to. Text denoted as a paragraph should be filled with written-language content or the mark-up is incorrect and should be using one of a number of other options instead.
某些浏览器可能允许您vertical-align在诸如段落块之类的项目上使用CSS 属性，但它们不应该这样做。表示为段落的文本应填充书面语言内容，否则标记不正确，应改用许多其他选项之一。
I hope this helps!
我希望这有帮助！
回答by Todd
something like
就像是
position:relative;
top:-5px;
just on the inline element itself works for me. Have to play with the top to get it centered vertically...
只是在内联元素本身对我有用。必须玩顶部才能使其垂直居中...
回答by Evan Meagher
You could apply position: relative;to the div and then position: absolute; top: 0;to a paragraph or span inside of it containing the text.
您可以应用position: relative;到 div，然后应用到position: absolute; top: 0;其中包含文本的段落或跨度。
回答by RockAndRollBot
You can use contextual selectors and move the vertical-align there. This would work with the p tag, then. Take this snippet below as an example. Any p tags within your class will respect the vertical-align control:
您可以使用上下文选择器并将垂直对齐移动到那里。那么这将适用于 p 标签。以下面的这个片段为例。类中的任何 p 标签都将遵循垂直对齐控制：
#header_selecttxt {
font-family: Arial;
font-size: 12px;
font-weight: bold;
}
#header_selecttxt p {
vertical-align: text-top;
}
You could also keep the vertical-align in both sections so that other, inline elements would use this.
您还可以在两个部分中保持垂直对齐，以便其他内联元素可以使用它。
回答by Ajay2707
The all above not work for me, I have just checked this and its work :
以上所有对我都不起作用，我刚刚检查了它及其工作：
vertical-align: super;
垂直对齐：超级；
<div id="lbk_mng_rdooption" style="float: left;">
<span class="bold" style="vertical-align: super;">View:</span>
</div>
I know by padding or margin will work, but that is last choise I prefer.
我知道通过填充或边距会起作用，但这是我更喜欢的最后选择。
回答by CodeNoob
position:absolute;
top:0px;
margin:5px;
Solved my problem.
解决了我的问题。
回答by Mr. Doomsbuster
You can use margin-top: -50% to move the text all the way to the top of the div.
您可以使用 margin-top: -50% 将文本一直移动到 div 的顶部。
margin-top: -50%;
回答by Ankur
The problem I had can't be made out from the info I have provided:
从我提供的信息中无法解决我遇到的问题：
- I had the text enclosed in old school
<p>tags.
- 我将文本括在旧学校
<p>标签中。
I changed the <p>to <span>and it works fine.
我改变了<p>对<span>和它工作正常。
