使用多个文本区域居中多个标签[重复]

Posted 2023-03-05

【中文标题】使用多个文本区域居中多个标签[重复]

【英文标题】：Center multiple labels with multiple textarea [duplicate]

【发布时间】：2015-05-14 14:56:17

【问题描述】：

我有多个标签和文本区域。他们排成这样：

       __________________
      |                  |
      |                  |
Label:|__________________|

我希望它是这样的：

       __________________
      |                  |
Label:|                  |
      |__________________|

这个问题已经有了答案除了我有多个标签和文本区域。所以我尝试使用答案：

CSS：

.label_textarea 
    vertical-align: middle;

HTML：

<p class="label_textarea">
<label>Label for textarea</label>
<textarea rows="5">Textarea</textarea>
</p>

但这对我不起作用。它不会改变布局中的任何内容。 而且标签和文本区域的组合数量每次都不一样，所以我不能使用标准数量。

我应该在这里做什么才能得到我想要的结果？

【问题讨论】：

嗨，正如您在所链接问题的已接受答案中看到的那样，vertical-align 属性设置在子级（label 和 textarea）与 .formfield * 选择器上，而不是就像您在示例中所做的那样在容器上。

@web-tiki 啊哈，是的，谢谢，但我仍然需要做一些该答案中没有的更改才能使其正常工作。

喜欢这个jsfiddle.net/webtiki/s6pzo2hx ?

【参考方案1】：

尝试为标签提供line-height 属性以及vertical-align Demo

CSS：

label 
    line-height:50px;
    vertical-align::middle;
    display:block;
    float:left;
    padding:5px 10px;

textarea   
    display:block;
    float:left;

html：

<p>
    <label>label</label>
    <textarea></textarea>
</p>

【讨论】：

只针对标签，还是针对文本区域？

仅用于标签，不适用于文本区域