Выровнять по вертикали текст в метке

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>

Answer 1

Вертикальное выравнивание работает только с элементами inline или inline-block и только относительно других встроенных элементов [-block]. Поскольку вы перемещаете метку, она становится элементом block .

Самое простое решение в вашем случае - установить метку на display: inline-block и добавить vertical-align: middle к меткам и входам. (Вы можете обнаружить, что высота текста такова, что вертикальное выравнивание в любом случае не будет иметь никакого значения.)

Answer 2

Вы пробовали line-height? Это не решит ваши проблемы, если есть несколько меток строк, но это может быть быстрое решение.

Answer 3

Стиль vertical-align используется в ячейках таблицы, поэтому здесь вам ничего не нужно.

Чтобы выровнять метки к полям ввода, вы можете использовать line-height:

line-height: 25px;

Answer 4

Вы можете использовать flexbox в 2018 году +:

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

Поддержка браузера: https://caniuse.com/#search=flexbox

Answer 5

У меня была похожая проблема, и я решил ее, обернув label в div и установив следующие стили:

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

Answer 6

Это то, что я обычно делаю для «вертикального выравнивания» текста внутри меток:

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

Не очень хорошо масштабируется, но работает.

Answer 7

Я сталкивался с этим, пытаясь добавить ярлыки на некоторые вертикальные радиобоксы. Я должен был сделать это:

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

Это заставляет их отображаться правильно, где метка центрирована на переключателе, хотя мне пришлось увеличивать верхний отступ каждой строкой, как вы можете видеть. Код не очень красивый, но в результате получается.

Answer 8

Используйте css на этикетке.

Например:

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

Обратите внимание, что высота строки будет регулировать высоту самой линии, тогда как поле будет определять, как далеко другие элементы будут находиться за пределами этикетки, а отступы будут определять любое внутреннее пространство от внешнего края метки. Поля и отступы работают следующим образом (по часовой стрелке: вверху справа внизу слева), поэтому 2px 5px 3px 5px:

2px Top 5px Right 3px Bottom 5 пикселей слева

Answer 9

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

Добавьте несколько отступов сверху и снизу вместо высоты.

Answer 10

Добавление свойства disply:flex к метке сделает работу!