与基线和文本区域垂直对齐 [英] Vertical-align with baseline and textareas

问题描述

我正在尝试使标签与文本区域中第一行文本的基线对齐.

I'm trying to get a label lined up with the baseline of the first line of text in a text area.

天真的尝试:

<div style="vertical-align: baseline; display: inline-block">
   <label for="comments">Comments:</label>
</div>
<div style="vertical-align: baseline; display: inline-block">
   <textarea name="comments" id="comments">test</textarea>
</div>

导致标签与文本区域的底部对齐.我希望它与该区域的第一行对齐.

results in the label being aligned with the bottom of the text area. I'd prefer to have it lined up with the first line of the area.

谢谢.

推荐答案

问题是文本区域被视为一个块，就像一个图像一样.进行垂直对齐时，它使用边框来确定位置而不是文本.在下面的示例中，您可以看到label和div是根据内部文本定位的，文本区域的行为类似于图像.

The problem is that the textarea is viewed as a block, like an image. When doing a vertical-align, it is using the border to determine placement instead of the text. In the example below, you can see that the label and div are positioned based on the text inside, where the textarea behaves like the image.

http://jsfiddle.net/kenearley/nGaQs/3/

我认为使标签和文本区域对齐的唯一方法是进行vertical-align:top，然后确保字体大小和行高比正确匹配.

I think the only way to get the label and textarea to align the way you want is to do a vertical-align:top, then make sure your font-size and line-height ratio match up right.

这篇关于与基线和文本区域垂直对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！