Последние проекты включают производство многих форм, особенно флажков и радиоприемников. Однако в процессе разработки интерфейса было обнаружено, что одиночные (множественные) флажки и текст подсказки за ними не могут быть выровнены без каких-либо настроек, и существует большая разница между Firefox и IE. Даже если установлен параметрвертикальное выравнивание:мидл, оно все равно не идеально выровнено. Как показано ниже:
Поэтому я проверил несколько веб-сайтов в Интернете и обнаружил, что эта проблема является распространенной, как показано ниже (FF3.5):
На многих страницах веб-сайтов, содержащих формы, существует проблема: элементы формы и текст подсказки не могут быть выровнены. Поэтому я решил изучить этот вопрос. Прежде всего, я искал статью старшего Уитли « У всех разные мнения о вертикальном выравнивании ». В своей статье Уитли упомянул следующие ключевые моменты вертикального центрирования:
1. При использовании вертикального выравнивания: по середине центр элемента выравнивается по центру окружающих элементов.
2. Определение «центра» здесь следующее: изображение, естественно, имеет половину высоты, а текст должен быть сдвинут вверх на 0,5ex от базовой линии, которая является точным центром строчной буквы «x». Однако многие браузеры часто определяют единицу ex как 0,5em, так что она не обязательно является точным центром x (если вы не понимаете такие термины, как базовая линия, сначала прочитайте статью Уитли).
Следуя этой идее и сравнивая проблемы, с которыми я столкнулся, первым делом я подумал проверить, использует ли браузер одинаковые правила отрисовки «флажков» и изображений (трактует ли он чекбокс как квадратное изображение). Поэтому я написал следующий код:
<стиль>
тело {размер шрифта: 12 пикселей;}
</стиль>
<input style="vertical-align:middle;" name="test" type="checkbox">
<img style="vertical-align:middle;" src="testpic.gif" />
тестовый текст
testpic.gif в коде представляет собой черную картинку того же размера, что и флажок. Дисплей под FF3.5 выглядит следующим образом:
