Question

我被要求垂直对齐表格中字段标签中的文字，但我不明白他们为什么不移动。我尝试使用vertical-align:top;和其他属性（如bottom和middle来设置内嵌样式，但它不起作用。

有什么想法吗？

<dd>
   <label class="<?=$email_confirm_class;?>" 
          style="text-align:right; padding-right:3px">Confirm Email</label>
   <input class="text" type="text" 
          style="border:none;" name="email_confirm" 
          id="email_confirm" size="18" value="<?=$_POST['email_confirm'];?>" 
          tabindex="4" /> 
   *
</dd>

Answer 1

垂直对齐仅适用于内嵌或内嵌块元素，并且它仅与其他内联[-block]元素相关。因为您浮动标签，它会变成块元素。

在您的情况下，最简单的解决方案是将标签设置为display: inline-block并将vertical-align: middle添加到标签和输入中。（您可能会发现文本的高度使得垂直对齐无论如何都不会产生任何差异。）

Answer 2

你试过line-height吗？如果有多个行标签，它将无法解决您的问题，但它可以是一个快速的解决方案。

Answer 3

表格单元格中使用了vertical-align样式，因此这里不会为您做任何事情。

要将标签与输入框对齐，您可以使用line-height：

line-height: 25px;

Answer 4

您可以在2018年使用flexbox：

.label-class {
    display: flex;
    align-items: center;
}

浏览器支持：https://caniuse.com/#search=flexbox

Answer 5

我遇到了类似的问题并解决了将label打包到div并设置以下样式的问题：

<div style="display: table; vertical-align: middle">
  <label style="display: table-cell;" ... > ... </label>
</div>

Answer 6

这就是我通常对标签内的“垂直对齐”文字所做的事情：

label {
   display: block;
   float: left;
   padding-top: 2px; /*This needs to be modified to fit */
}

它不会很好地扩展，但它可以工作。

Answer 7

我遇到了这个尝试添加一些垂直无线电盒子的标签。我不得不这样做：

<%: Html.RadioButton("RadioGroup1", "Yes") %><label style="display:inline-block;padding-top:2px;">Yes</label><br />
<%: Html.RadioButton("RadioGroup1", "No") %><label style="display:inline-block;padding-top:3px;">No</label><br />
<%: Html.RadioButton("RadioGroup1", "Maybe") %><label style="display:inline-block;padding-top:4px;">Maybe</label><br />

这使得它们能够正确显示，标签位于单选按钮的中心位置，但我必须使用每一行增加顶部填充，如您所见。代码不漂亮，但结果是。

Answer 8

label {
        padding: 10px 0;
        position: relative;
    }

添加一些填充顶部和填充底部而不是高度。

Answer 9

在标签上使用css。

例如：

label {line-height:1em; margin:2px 5px 3px 5px; padding:2px 5px 3px 5px;}

请注意，行高将调整行本身的高度，而margin将指示其他元素在标签外部的距离，并且填充将指示标签外边缘的任何内部空间。边距和填充像这样工作（顺时针：右上角左下），所以2px 5px 3px 5px是：

2px Top 5px对 3px底部 5px左

Answer 10

为此，您应该更改输入的vertical-align属性。

<dd><label class="<?=$email_confirm_class;?>" style="text-align:right; padding-right:3px">Confirm Email</label><input class="text" type="text" style="vertical-align: middle; border:none;" name="email_confirm" id="email_confirm" size="18" value="<?=$_POST['email_confirm'];?>" tabindex="4" /> *</dd>

这是一个更完整的版本。它已经在IE 8中进行了测试，它的工作原理。通过从输入中删除vertical-align：middle来查看差异：

<html><head></head><body><dl><dt>test</dt><dd><label class="test" style="text-align:right; padding-right:3px">Confirm Email</label><input class="text" type="text" style="vertical-align: middle; font-size: 22px" name="email_confirm" id="email_confirm" size="28" value="test" tabindex="4" /> *</dd></dl></body></html>

Answer 11

将disply:flex属性添加到标签将完成工作！

Answer 12

如果标签在表中，则填充可能会导致其扩展。为了避免这种情况，您可以使用margin：

div label {
    display: block;
    text-align: left;
    margin-bottom: -0.2%;
}

Answer 13

您无需添加任何填充或编辑行高！

相反，只要确保您拥有这样的HTML即可：

<label><input type="checkbox" name=""><span>Checkbox Text</span></label>

只需确保输入的高度和宽度相同，并且文本具有相同的字体大小即可。

然后，它将看起来非常完美并且看起来居中。

Answer 14

你有这个：

<label class="styling_target">Label Text</label>
<input />

改为这样做：

<label>
  <span class="styling_target">Label Text</span>
  <input />
</label>

给标签设置样式并不能真正起作用，但您可以在其中包含任意 HTML，并且您可以对其进行样式设置。

Answer 15

这些都不适合我。我正在将ASP.Net MVC与Bootstrap一起使用。我成功使用了以下内容：

.label-middle { 
    padding-top:6px;
}

<label id="lblX" class="label-middle" ></label>

这使标签与旁边的文本框垂直对齐。

垂直对齐标签中的文本

15 个答案: