Центрированные элементы, разделенные разрывом строки, неправильно выравниваются в Firefox

Я создаю окно входа в систему, в котором все содержимое сосредоточено. У меня есть абзац текста, два поля формы, расположенные друг над другом, и кнопка. Поля формы имеют одинаковую ширину, и я упорядочиваю их, просто помещая между ними разрыв строки (<br />).

Поскольку ко всему блоку применено text-align: center;, вы могли бы подумать, что два поля формы будут точно выровнены, верно (одно поверх другого с идеально выровненными краями, поскольку они имеют одинаковую ширину)? Однако в Firefox второе поле формы смещено вправо примерно на 1 или 2 пикселя.

Что вызывает это? Сам разрыв строки занимает очень мало места и, следовательно, нарушает центрирование? Если да, то как мне это предотвратить?


html line-breaks center firefox text-align
person daGUY    schedule 29.07.2011    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Во-первых, разрыв строки не создает интервала до или после содержимого вокруг него, поэтому проблема с интервалом возникает не из-за разрыва строки. Полный пример кода поможет, но проверьте следующее, потому что это работает и идеально выравнивает их в Firefox:

<div style="text-align: center;">
  Some text<br />
  <input type="text" style="width: 150px;"><br />
  <input type="text" style="width: 150px;">
</div>

Сначала проверьте тип документа вашей страницы. Убедитесь, что вы правильно объявляете его (xhtml, учитывая, что вы закрываете разрыв строки). Кроме того, учитывая, что я уверяю вас, что разрывы строк не размещают вещи после них, вам следует попытаться разобрать свой код, пока не найдете причину. У вас может быть неразрывный пробел перед одним из полей ввода (см. http://www.htmlbasictutor.ca/non-breaking-space.htm, потому что я не знаю, как заставить stackoverflow записать этот символ), что приведет к его перемещению, или у вас может быть какой-то CSS, дающий одному из них отступ. У вас может быть плавающий элемент над ними, который вторгается в один и сдвигает его.

Если ничего не помогает, просто поместите их в свои собственные div вместо использования разрыва строки. Обертывание чего-либо в div будет иметь тот же эффект. Также вы можете очистить: оба; на div, чтобы убедиться, что ничто над ним не влияет на него.

person Frug    schedule 29.07.2011
comment
Да, этот код отлично работает для меня ... должно быть что-то еще на странице, которое его сбрасывает. Это так странно - если я оборачиваю каждый ввод в div вместо использования разрыва строки, он отображается правильно. Это достаточно просто, и это устраняет проблему, поэтому я думаю, что на этом остановлюсь. Спасибо! - person daGUY; 29.07.2011