与基线和文本区域垂直对齐

我试图在文本区域中获得与第一行文本的基线对齐的标签。与基线和文本区域垂直对齐

天真的尝试：

<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"></textarea> 
</div>

导致标签与文本区域的底部对齐。我宁愿让它与该区域的第一行排成一行。

谢谢。

来源

2010-09-17 jmo

标签和textarea的字体大小是否相同？ – 2012-03-08 20:42:51

你需要把labeldiv相同div内的textarea的，那么，如果你想将其设置为的textarea你要找的vertical-align: top，不baseline顶部。

视图和示例这里：
http://jsfiddle.net/anhus/

来源

2010-09-17 15:48:32 Robert

问题是我想要文本排列在textarea文本的基线上。将其与文本区域的顶部对齐时，将其与其他与基准对齐的标签+文本字段进行比较时看起来有误。 – jmo 2010-09-17 18:57:46

好的，只需将'vertical-align：top'更改为你想要的。基线，或其他。 – Robert 2010-09-17 19:42:22

-1：错过了这一点。他希望将标签基线与textarea的* first *基线对齐，这是排版正确的事情。我仍然没有找到一个好的方法来做到这一点 - 无论何时您标注的内容都有不同的文字指标。 – 2012-02-13 22:08:01

的问题是，textarea的被视为一个块，像的图像。在进行垂直对齐时，它使用边框来确定位置而不是文本。在下面的示例中，您可以看到标签和div基于文本内部的位置进行定位，其中textarea的行为与图像相似。

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

我认为，以获取标签和文本区域对准您想要的方式唯一的办法就是做一个垂直对齐：顶部，然后确保你的字体大小和行高的比例搭配起来对。

来源

2012-03-08 21:09:19

进一步看，你可以看到，使用基线甚至不能使用像标签和div这样的两个块级元素。该标签排列在div的最后一行。 – 2012-03-08 21:15:47

谢谢！对我有用。 – Boyang 2013-08-06 03:32:56

与基线和文本区域垂直对齐

回答

相关问题