垂直对齐标签中的文本

Question

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

原文由 Ian 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你可以在 2018+ 中使用 flexbox：

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

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

原文由 German Khokhlov 发布，翻译遵循 CC BY-SA 4.0 许可协议