标签中的垂直对齐文本

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

要做到这一点，您应该改变输入的垂直对齐属性。

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

这里有一个更完整的版本，它已经在 IE8中测试过了，并且可以正常工作。 通过从输入中删除竖直对齐: 中间来查看差异:

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

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

小开

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

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

虽然不能很好地伸缩，但是很有效。

小开

vertical-align样式用在表单元格中，所以在这里它不会为您做任何事情。

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

line-height: 25px;
小开

垂直对齐只适用于 内嵌式或 行内阻塞元素，并且只相对于其他内联[-block ]元素。因为浮动了标签，所以它变成了 拦截元素。

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

小开

我无意中发现了这个，试图给一些垂直的收音机盒子添加标签，我不得不这样做:

<%: 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 />

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

小开

我有一个类似的问题，并解决了它包装的 label成一个 div和设置以下样式:

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

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

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

小开

在标签上使用 css。

例如:

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

请注意，line-height 将调整行本身的高度，而页边距将指示其他元素离标签的距离，填充将指示标签外边缘的任何内部空间。边距和填充工作原理如下(顺时针方向: 左上右下) ，所以2px 5px 3px 5px 是:

2px 最高 5px 右 底部3像素 左边5px

小开

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

小开

你可以在2018年使用 Flexbox + :

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

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

小开

这些对我来说都不管用。我正在使用 ASP.Net MVC 和 Bootstrap。 我成功地使用了以下方法:

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


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

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

小开

如果你的标签在表格中，填充可能会导致它膨胀。为了避免这种情况，你可以使用边距:

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

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

相反，只要确保当你有这样一个 HTML:

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

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

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

小开

你有这个:

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

不如这样做:

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

标签的样式化并不能真正起作用，但是可以在其中使用任意的 HTML，并且可以对其进行样式化。

小开

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

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

小开

缺乏优雅，纯 HTML，没有 CSS 解决方案:

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

只需将标签的 垂直对齐属性设置为 头儿。

label {
vertical-align: top;
}
 <label for="desc">Description</label>
<textarea name="desc" id="desc" cols="30" rows="10"></textarea>


提交答案