Positioning текст внутри <label></label>

Question

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

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

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

Это не центрировать текст внутри моего основного слоя. Нужно ли мне положить слой Arround теги этикеток делает его:

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

Что является стандартным методом для достижения этой цели?

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

Answer 1

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

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

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

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

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