Die Ausrichtung von Inputfeldern mit „CSS vertical align“ ist immer wieder eine Herausforderung beim Frontent Webdevelopment. Formulare sind das wichtigste Element auf kommerziellen Internetseiten und ein wesentlicher Erfolgsfaktor für professionelles Webdesign. Aus genau diesem Grund muß man sich hier auch die größte Mühe bei geben, damit man den User auch von seinem Formular überzeugt. Hier zählt neben der guten Usability und Accessibility auch das mit HTML und CSS umgesetzte Layout.
Da ja immer noch das 1er HTTP Protokoll genutzt wird, sind die Formularelemente selber allerdings noch aus dem letzten Jahrtausend. Das ist zwar schwer vorstellbar, aber dennoch die Wahrheit. Formularelemente zur Eingabe, wie Radio-Buttons, Checkboxen und auch Drop-Down Menus können hier immer wieder nicht zeitgemäß im Layout auffallen. Das alleine wäre aber nicht so schlimm, gäbe es nicht zusätzlich noch Probleme mit ihrer Ausrichtung. Hier gibt es natürlich viele Design Vorlagen und auch Frontend Frameworks, wie Bootstrap, die natürlich schnelle und robuste Lösungen für unterschiedliche Browser und Versionen bieten. Ob man mit diesem technologischen Overkill allerdings auf technische Probleme schießen sollte ist weiterhin fraglich und schlecht für Performance und Ladezeit.
CSS vertical align checkbox label
Bei Checkboxen gibt es eine Möglichkeit diese global über das CSS anzusprechen und richtig zu positionieren. Die folgenden Angaben zur bottom Positionierung sind natürlich abhängig von der Schriftgröße, die man auf der Internetseite einsetzt.
HTML
<label class="checkbox-label"><input type="checkbox" value="115">-middle</label>
CSS
label.checkbox-label input[type=checkbox]{
position: relative;
vertical-align: middle;
bottom: 1px;
}Einen jsfiddle Link zu dem Code Beispiel gibt es hier http://jsfiddle.net/576wT/
