Центрированные элементы, разделенные разрывом строки, не корректно выравниваются в Firefox - PullRequest
Новая
       12

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

1 голос
/ 29 июля 2011

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

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

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

1 Ответ

1 голос
/ 29 июля 2011

Во-первых, разрыв строки не создает интервалов до или после содержимого вокруг него, поэтому разрыв строки не вызывает проблем с интервалами. Полный пример кода поможет, но проверьте следующее, потому что это работает, и выровняйте их идеально в 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, чтобы убедиться, что ничто не всплывало выше, это не влияет на это.

...