使textarea标签与其标签对齐并垂直居中

Question

请查看这个示例：http://jsfiddle.net/hughbe/QYGcq/ 正如您所见，<textarea id = "FooText"></textarea>的标签在textarea旁边，但是我想将标签垂直放置在textarea旁边或者在textarea上方，而不是像示例中那样在底部。

我已经尝试将其CSS设置为vertical-align: middle，但没有成功。我该怎么做才能使标签在顶部或中间对齐？

谢谢。

- H Bellamy

Answer 1

在<a href="http://jsfiddle.net/VxY6m/" rel="nofollow">http://jsfiddle.net/VxY6m/</a>上使用 vertical-align: middle，因为垂直对齐是相对于文本行的，在这种情况下是标签。

- welldan97

Answer 2

试试这个：

<style>
    label {
        display: block; 
        float: left; 
        padding-top: 8px
    }
    textarea {
        resize: none; 
        overflow-y: hidden;        
    }
</style>
<label for="FooText">Content:</label>
<textarea id="FooText"></textarea>

我所做的是将标签设置为块级元素，并对其应用顶部填充。 请参见fiddle。

- Bas Slagter