垂直对齐标签中的文本

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

来源

2009-10-12 Ian

要做到这一点，你应该改变输入的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中测试过了，它可以工作。看到通过删除垂直对齐的区别：从输入中间：

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

来源

2009-10-12 14:39:56

在我的经验中，文本字段非常难以驯服，垂直填充的工作更可靠。 – Wabbitseason 2009-10-12 14:42:20

'vertical-align'在这里不做任何事情（IE 8）。 – Joey 2009-10-12 14:42:49

我已经在IE8和FF（ubuntu）中测试了它，删除了垂直对齐以查看效果，并且它工作正常。我更新了这个例子。 – 2009-10-12 16:13:00

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

来源

2009-10-12 14:40:36 Wabbitseason

谢谢！它在我的情况下工作... – jpsstavares 2011-12-12 15:40:38

保存了很多时间:) – 2017-03-07 08:36:06

这是我平时做的内部标签，以“垂直对齐”文本：

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

它不会规模非常漂亮，但很有效。

来源

2009-10-12 14:48:23 peirix

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

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

line-height: 25px;

来源

2009-10-12 14:50:20 Guffa

它不适用于变量高度。 – Rodrigo 2015-11-04 18:26:34

垂直对齐只有在线或inline-block的元素的作品，它只是相对于其他内联[是 - 块]元素。因为你浮动标签，它会变成块元素。

您的情况最简单的解决方案是将标签设置为display: inline-block并将vertical-align: middle添加到标签和输入。（你可能会发现文本的高度是这样的，垂直对齐无论如何不会有任何区别。）

来源

2009-10-12 15:40:53 DisgruntledGoat

我遇到了这个问题，试图在一些垂直无线电盒子上添加标签。我不得不这样做：

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

这让他们能正确显示，在标签上的单选按钮为中心的，虽然我曾与每行递增的顶部填充，你可以看到。代码并不漂亮，但结果是。

来源

2009-12-16 02:57:06

我也有类似的问题，并解决它包裹label成div和设置以下样式：

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

来源

2013-03-26 11:59:48 Pablo

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

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

来源

2017-03-19 19:57:54

也许拼出了样式属性应该是什么样子？也许OP不知道你的意思。 – einpoklum 2017-03-19 20:39:19

在您的标签上使用CSS。

例如：

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

注意，行高将调整线本身的高度，而余量将决定多远其它元件将是拉布勒外部和衬垫将决定任何内部空间从标签的外边缘。 margin和padding工作像这样（顺时针方向：右上左下），所以为2px 5px的3px的5px的是：

2px的顶部 5px的权利 3px的底部 5px的左

来源

2017-04-21 16:44:28 psiclone

-1

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

来源

2017-09-02 16:31:20

垂直对齐标签中的文本

回答

相关问题