垂直对齐标签中的文本答案

【问题标题】：Vertical Align text in a Label垂直对齐标签中的文本
【发布时间】：2009-10-12 14:36:55
【问题描述】：

有人要求我垂直对齐表单中字段标签中的文本，但我不明白为什么它们没有移动。我尝试使用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>

【问题讨论】：

像往常一样 CSS 问题：10 个错误答案和一个通用解决方案（在这种情况下显示表格、表格单元格和垂直对齐中间）。为什么 CSS 仍然是它一直以来的脆弱的老鼠窝？主要是因为很难消除原始“规范”中大量糟糕的决策（我松散地使用了这个词）。这绝对应该是标签上的一个简单属性，就像将文本放在左侧而不是右侧一样。为什么不是这样？非常糟糕的实施决策。
@RickO'Shea 我完全同意。也许这是我的背景，但我来自 WPF/Silverlight/WinForms，在那里我大部分时间都在编写有用的代码。使用 CSS 时，我花了很多时间试图让网络应用程序的布局正确，我什至没有尝试为多种设备尺寸进行开发！

标签： html css

【解决方案1】：

你可以在 2018+ 年使用 flexbox：

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

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

【讨论】：

@RickO'Shea 这是唯一对我有用的东西。我认为这是因为我的标签位于显示为 flex 的输入组中。因此，即使它可能适用于您的情况，它也适用于其他一些情况。
这适用于最新版本的 Bootstrap。谢谢。

【解决方案2】：

垂直对齐仅适用于 inline 或 inline-block 元素，并且仅相对于其他 inline[-block] 元素。因为你浮动标签，它变成了一个 block 元素。

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

【讨论】：

【解决方案3】：

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

【讨论】：

节省了很多时间:)

【解决方案4】：

vertical-align 样式用于表格单元格中，因此在这里对您没有任何作用。

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

line-height: 25px;

【讨论】：

【解决方案5】：

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

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

【讨论】：

这个答案暗示了一个通用的解决方案，但了解更多关于display:table的信息会立即有用

【解决方案6】：

这是我通常对标签内的“垂直对齐”文本所做的：

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

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

【讨论】：

【解决方案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 />

这可以让它们正确显示，标签以单选按钮为中心，尽管我必须增加每一行的顶部填充，如您所见。代码不漂亮，但结果很好。

【讨论】：

【解决方案8】：

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

添加一些 padding-top 和 padding-bottom 而不是高度。

【讨论】：

也许可以说明样式属性应该是什么样子？或许 OP 不明白你的意思。

【解决方案9】：

在标签上使用 css。

例如：

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

请注意，line-height 将调整行本身的高度，而 margin 将决定其他元素在标签之外的距离，而 padding 将决定标签外边缘的任何内部空间。边距和内边距是这样工作的（顺时针：右上左下），所以 2px 5px 3px 5px 是：

2px 顶部 5px 右 3px 底部 5px 左

【讨论】：

【解决方案10】：

为此，您应该更改输入的垂直对齐属性。

<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 中进行了测试，并且可以正常工作。通过从输入中删除垂直对齐：中间来查看差异：

<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>

【讨论】：

根据我的经验，文本字段很难驯服，而垂直填充更可靠。
vertical-align 在这里没有做任何事情（IE 8）。
我已经在 IE8 中测试过，FF (ubuntu) 移除了垂直对齐来查看效果，它运行良好。我也更新了示例。

【解决方案11】：

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

【讨论】：

【解决方案12】：

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

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

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

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

【讨论】：

【解决方案13】：

如果您的标签在表格中，则填充可能会导致其展开。为避免这种情况，您可以使用边距：

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

【讨论】：

【解决方案14】：

您不必添加任何填充或编辑行高！

相反，只要确保当您有这样的 HTML 时：

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

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

然后，它看起来会非常好并且看起来居中。

【讨论】：

我认为如果你要这样回答，你最好提供一个工作示例的链接，并用相关的样式充实你拥有的代码。这样会更有帮助。

【解决方案15】：

你有这个：

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

改为这样做：

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

为标签设置样式实际上并没有用，但您可以在其中包含任意 HTML，并且您可以设置它的样式。

【讨论】：

【解决方案16】：

强制相对位置提供顶部/底部调整

.whatever {
    position: relative;
}

.whatever .input {
    position: relative;
}

.whatever span {
    position: relative;
    top: -2px; /* adjust this up or down */
}

<label class="whatever">
    <input type="checkbox"><span>my thing</span>
</label>

【讨论】：

【解决方案17】：

缺乏优雅，纯html，没有CSS解决方案：

<table>
   <tr>
      <td>
         <label></label>
      </td>
   </tr>
   <tr>
      <td>
         <input></input>
      </td>
   </tr>
</table>

【讨论】：