为什么垂直对齐: 文本顶部; 不在 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;
}
280612 次浏览
小开
最佳答案

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: 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.

小开

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.

I changed the <p> to <span> and it works fine.

小开

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.

小开

vertical-align is 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.

Some browsers may allow you to use the vertical-align CSS 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.

I hope this helps!

小开

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...

小开

You can use margin-top: -50% to move the text all the way to the top of the div.

margin-top: -50%;
小开

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:

#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.

小开

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.

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

Solved my problem.

小开

PS.: I'm not a ux or frontend engineer

.make-it-valign-on-top {
vertical-align: super;
vertical-align: text-top;
vertical-align: top;
}


<span class="make-it-valign-on-top">my text</span>

提交答案