Text-align: center не будет работать с тегом <label> (?)

Я проходил сайт, который я только что завершил, и исправил некоторые проблемы с доступностью. У меня была форма:

<input type="hidden" name="redirect" value="thank-you.php" />
<p>Enter your Email Address to receive our Weekly Newsletter</p>                            
<input name="email" type="text" id="formifemail" size="21" />
<input type="image" src="images/newsletter_button.jpg" alt="submit button" border="0" name="Submit" id="Submit" value="Send" />

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

на тег следующим образом:

<input type="hidden" name="redirect" value="thank-you.php" />
<label for="formifemail">Enter your Email Address to receive our Weekly Research</label>                            
<input name="email" type="text" id="formifemail" size="21" />
<input type="image" src="images/newsletter_button.jpg" alt="submit button" border="0" name="Submit" id="Submit" value="Send" />

и CSS:

#formItem label {
    text-align:center;
    line-height:150%;
    font-size:.85em;
}

Но текст выглядит как левый, а не центрированный. Я осмотрелся, что нет явных ошибок. Это происходит как в FF 3.x, так и в IE 7.x

Ответ 1

Это связано с тем, что label является встроенным элементом и поэтому имеет только размер текста, который он содержит.

Возможно, вы увидите свой label как элемент блока следующим образом:

#formItem label {
    display: block;
    text-align: center;
    line-height: 150%;
    font-size: .85em;
}

Однако, если вы хотите использовать метку в той же строке с другими элементами, вам либо нужно установить display: inline-block;, либо дать ей явную ширину (которая не работает в большинстве браузеров), или вам нужно обернуть внутри div и выполнить выравнивание в div.

Ответ 2

label является встроенным элементом, поэтому его ширина равна ширине содержащегося в нем текста. В браузере на самом деле отображается метка с text-align:center, но поскольку метка только такая же, как текст, который вы не заметили.

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