Позиционирование текста внутри <label></label>

Question

Уважаемые участники сообщества,

Я бы хотел поместить текст внутри теста в центр div. Код будет выглядеть следующим образом:

<div id="main" style="width: 960px;">
<form>
<label for="test">Testing everything:</label>
</form>

Теперь, если я попробую следующий раздел кода:

<label for="test" style="width: 100%; text-align:center;">Testing everything:</label>

Он не центрирует текст внутри моего основного слоя. Нужно ли размещать слой вокруг меток, делая его таким:

<div style="width:100%; text-align:center;"><label for="test">Testing everything:</label></div>

Какой стандартный метод для этого?

Спасибо за ваши ответы!

Answer 1

Ваша проблема очень проста: метка не является тегом уровня блока, что означает, что вы не можете дать элементам метки ширину. Другими словами, ширина элемента метки - это ширина его содержимого.

В вашем случае это означает, что он не заполняет всю ширину вашего "тестового" div и не может быть отцентрирован.

Чтобы это исправить, просто добавьте следующее свойство CSS к метке:

дисплей: встроенный блок;

Таким образом, ваша метка будет рассматриваться как блок для всего, что связано с шириной (и высотой), и ваша 100% ширина будет успешно применена, что приведет к красиво центрированному тексту.