我被要求垂直对齐表单中字段的标签中的文本,但我不明白它们为什么不移动.我已尝试使用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>
Dis*_*oat 32
垂直对齐仅适用于内联或内联块元素,并且仅与其他内联[-block]元素相关.因为你浮动标签,它就变成了一个块元素.
在您的情况下,最简单的解决方案是将标签设置为标签和输入display: inline-block并添加vertical-align: middle到标签和输入.(您可能会发现文本的高度使得垂直对齐无论如何都不会有任何区别.)
Ger*_*lov 15
您可以在2018年以后使用flexbox：
.label-class {
display: flex;
align-items: center;
}
浏览器支持：https : //caniuse.com/#search=flexbox
Guf*_*ffa 13
该vertical-align样式用于表格单元格,因此这里不会为您做任何事情.
要将标签与输入框对齐,您可以使用line-height:
line-height: 25px;
我有一个类似的问题，并解决了它包装label成 adiv并设置以下样式：
<div style="display: table; vertical-align: middle">
<label style="display: table-cell;" ... > ... </label>
</div>
这就是我通常对标签内的文本进行“垂直对齐”的做法：
label {
display: block;
float: left;
padding-top: 2px; /*This needs to be modified to fit */
}
它不会很好地扩展，但它可以工作。
为此，您应该更改输入的垂直对齐属性。
<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>
| 归档时间： |
|
| 查看次数： |
127242 次 |
| 最近记录： |