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

Мне было предложено вертикально выровнять текст в ярлыках полей в форме, но я не понимаю, почему они не двигаются. Я пробовал вставлять строчные стили с помощью 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>

Ответ 1

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

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

Ответ 2

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

Ответ 3

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

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

line-height: 25px;

Ответ 4

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

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

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

Ответ 5

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

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

Ответ 6

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

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

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

Ответ 7

Для этого вы должны изменить свойство вертикального выравнивания ввода.

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

Ответ 8

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

Ответ 9

Используйте css на вашей метке.

Например:

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

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

2px Вверх 5 пикселей справа 3px Bottom 5px Влево

Ответ 10

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