Jaki jest najczystszy sposób na prawidłowe wyrównanie przycisków / pól wyboru z tekstem? Jedyne niezawodne rozwiązanie, z którego dotychczas korzystałem, to oparte na tabelach:
<table>
<tr>
<td><input type="radio" name="opt"></td>
<td>Option 1</td>
</tr>
<tr>
<td><input type="radio" name="opt"></td>
<td>Option 2</td>
</tr>
</table>
Chciałbym znaleźć rozwiązanie, które nie zakłada nic o rozmiarach lub specjalnych dziwactwach w przeglądarce. Macie jakieś sugestie?
1 odpowiedź
Jednym z najczęściej zalecanych rozwiązań jest użycie vertical-align: middle:
<input type="radio" style="vertical-align: middle"> Label
Problem polega jednak na tym, że nadal powoduje to widoczne niedopasowania, nawet jeśli teoretycznie powinno to działać. Specyfikacja CSS2 mówi, że:
''Własność vertical-align określa wyrównanie pionowe elementów inline lub komórek tabeli. Middle wyrównuje środek elementu ze środkiem małych liter rodzica.''
Powinien więc znajdować się w idealnym środku (wysokość x to wysokość znaku x). Jednak problem wydaje się być spowodowany faktem, że przeglądarki często dodają losowe nierówne marginesy do przycisków opcji i pól wyboru. Można sprawdzić, na przykład w Firefoksie za pomocą Firebug, że domyślny margines pola wyboru w Firefox to 3px 3px 0px 5px. Nie jestem pewna, skąd pochodzi, ale inne przeglądarki wydają się mieć podobne marginesy. Aby więc uzyskać idealne wyrównanie, należy pozbyć się tych marginesów:
<input type="radio" style="vertical-align: middle; margin: 0px;"> Label
Warto zauważyć, że w rozwiązaniu opartym na tabelach marginesy są w jakiś sposób zjadane i wszystko ładnie się wyrównuje.
