выравнивание текста: центр не будет работать с тегом формы <label>(?)

Question

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

<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

.

Answer 1

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

Возможно отобразить ваш label как блочный элемент, например:

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

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

Answer 2

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

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