垂直对齐标签中的文本 [英] Vertical Align text in a Label

问题描述

我被要求在字段的标签中垂直对齐文本，但我不明白为什么他们不移动。我已经尝试了使用vertical-align：top;和其他属性，如底部和中部，但它不工作。

I have been asked to vertically align the text in the labels for the fields a form but I don't understand why they are not moving. I have tried putting in-line styles using vertical-align:top; and other attributes like bottom and middle but it don't work.

有什么想法吗？

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

感谢Ian

推荐答案

垂直对齐仅适用于内嵌或内嵌块元素，而且只与其他内嵌[-block]元素相关。

Vertical alignment only works with inline or inline-block elements, and it's only relative to other inline[-block] elements. Because you float the label, it becomes a block element.

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

The simplest solution in your case is to set the label to display: inline-block and add vertical-align: middle to the labels and the inputs. (You might find that the height of the text is such that vertical align won't make any difference anyway.)

这篇关于垂直对齐标签中的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！