Мне было предложено вертикально выровнять текст в ярлыках полей в форме, но я не понимаю, почему они не двигаются. Я пробовал вставлять строчные стили с помощью 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>
Вертикальное выравнивание работает только с встроенным или встроенным блоком, и оно относится только к другим встроенным элементам [-block]. Поскольку вы плаваете метку, она становится элементом block.
Самое простое решение в вашем случае - установить метку на display: inline-block и добавить vertical-align: middle к меткам и входам. (Вы можете обнаружить, что высота текста такова, что вертикальное выравнивание не будет иметь никакого значения.)
Вы пробовали line-height? Это не решит ваши проблемы, если есть несколько ярлыков строк, но это может быть быстрое решение.
Стиль vertical-align используется в ячейках таблицы, поэтому для вас здесь ничего не будет.
Чтобы выровнять метки с полями ввода, вы можете использовать line-height:
line-height: 25px;
Это то, что я обычно делаю для текста с вертикальным выравниванием внутри меток:
label {
display: block;
float: left;
padding-top: 2px; /*This needs to be modified to fit */
}
Он не будет масштабироваться очень хорошо, но он работает.
У меня была аналогичная проблема, и я решил обернуть label в div и установить следующие стили:
<div style="display: table; vertical-align: middle">
<label style="display: table-cell;" ... > ... </label>
</div>
Я наткнулся на это, пытаясь добавить ярлыки к некоторым вертикальным радио-ящикам. Я должен был сделать это:
<%: 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 />
Это позволяет отображать их правильно, когда метка сосредоточена на переключателе, хотя мне приходилось увеличивать верхнюю часть каждой строки, как вы можете видеть. Код не довольно, но результат.
Для этого вы должны изменить свойство вертикального выравнивания ввода.
<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>
label {
padding: 10px 0;
position: relative;
}Используйте css на вашей метке.
Например:
label {line-height:1em; margin:2px 5px 3px 5px; padding:2px 5px 3px 5px;}
Обратите внимание, что высота линии будет регулировать высоту самой линии, тогда как поле будет определять, насколько далеко другие элементы будут за пределами макета, а отступы будут определять любое внутреннее пространство из внешнего края метки. Поля и отступы работают так (по часовой стрелке: верхний правый нижний левый), поэтому 2px 5px 3px 5px:
2px Вверх 5 пикселей справа 3px Bottom 5px Влево
Добавление свойства disply:flex на метку будет выполнено!