如何对齐标签和文本区域？答案

【问题标题】：How do I align a label and a textarea?如何对齐标签和文本区域？
【发布时间】：2010-12-22 19:16:03
【问题描述】：

我的代码最终如下：

             XXXXX
             XXXXX
Description: XXXXX

我想要：

             XXXXX
Description: XXXXX
             XXXXX

“描述”有时会跨越多行。

代码：

<p class="DataForm">
    <label>Blah blah blah Description:</label>
    <asp:TextBox ID="txtBlahblahblahDescription"
                 runat="server"
                 TextMode="MultiLine"
                 Rows="8"
                 Columns="50"></asp:TextBox><br/>
</p>

CSS：

.DataForm {
}
.DataForm label {
    display: inline-block;
    font-size: small;
    margin-left: 5px;
    width: 5%;
    min-width: 60px;
}
.DataForm input {
    margin-right: 9px;
    display: inline-block;
    width: 21%;
    min-width: 30px;
}

【问题讨论】：

你想要Description标签在中间吗？
您是使用表格还是内联表格，您是否将标签向左浮动等？您能否发布您的 HTML 和 CSS，以便我们知道您的代码是什么样的？很难推荐可能不适合您的代码的样式和布局。
是的，如果可能，描述标签需要垂直居中。 . . .我会附上我的代码

标签： html css asp.net

【解决方案1】：

将文本区域框与标签对齐，而不是将标签与文本区域对齐，

label {
    width: 180px;
    display: inline-block;
}

textarea{
    vertical-align: middle;
}

<label for="myfield">Label text</label><textarea id="myfield" rows="5" cols="30"></textarea>

【讨论】：

【解决方案2】：

只需用标签包裹 textarea 并将 textarea 样式设置为

vertical-align: middle;

这是页面上所有文本区域的一些魔法：)

<style>
    label textarea{
        vertical-align: middle;
    }
</style>

<label>Blah blah blah Description: <textarea>dura bura</textarea></label>

【讨论】：

这非常有效。选择的答案没有。谢谢！

【解决方案3】：

您需要将它们都放在某个容器元素中，然后对其应用对齐方式。

例如：

.formfield * {
  vertical-align: middle;
}

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

【讨论】：

嗯，我尝试将它作为内联样式放在我的 p 标签上，但它不起作用
不会继承吗？反正我试过了，还是不行:(
我的错，它确实适用于 dataform *，虽然它的居中方式有点奇怪，但它有效，所以谢谢
更好的解决方案是将vertical-align: middle; 放在上面的每个规则中，.DataForm label 和.DataForm textarea。使用 * 选择器有时会产生副作用。
你可能是对的，但如果有人会vertical-align: middle 某事，通常宁愿将其应用于完整的块。

【解决方案4】：

试试这个：

textarea { vertical-align: top; }

【讨论】：

【解决方案5】：

将标签的height 设置为与多行文本框相同的height。

为标签控件添加 cssClass .alignTop{vertical-align: middle;}。

<p>
    <asp:Label ID="DescriptionLabel" runat="server" Text="Description: " Width="70px" Height="200px" CssClass="alignTop"></asp:Label>
    <asp:Textbox id="DescriptionTextbox" runat="server" Width="400px" Height="200px" TextMode="MultiLine"></asp:Textbox>
    <asp:RequiredFieldValidator id="DescriptionRequiredFieldValidator" runat="server" ForeColor="Red"
    ControlToValidate="DescriptionTextbox" ErrorMessage="Description is a required field.">    
</asp:RequiredFieldValidator>

【讨论】：

【解决方案6】：

尝试在 td 元素上设置高度。

vertical-align: middle;

表示应用样式的元素将在父元素内对齐。 td的高度可能只和里面的文字一样高。

【讨论】：

【解决方案7】：

在您的 CSS 中使用 vertical-align:middle。

<table>
    <tr>
       <td style="vertical-align:middle">Description:</td>
       <td><textarea></textarea></td>
    </tr>
</table>

【讨论】：

如果可能的话，我正在寻找一个没有表格的优雅解决方案。
你应该在你的问题中写下类似的东西。
现在谁在用表格做表格？
对不起，我认为这很明显:(
表格对表格完全有效。它是表格数据，尽管只有一个数据行（或列）。