Как расположить три ссылки в ряд по центру высоты?

Question

[Роман Якушев]

Есть три ссылки. Условия:
1. Расположить в строку
2. У ссылок должен быть фон, который будет меняться при наведении.
3. Текст внутри ссылки должен быть выровнен по вертикали.
4. Ссылки должны быть одинаковых размеров
вот что я накидал: jsbin.com

как я вижу - всего 2 варианта:
на div с float:left
на table....

оба варианта не подходят - с div не могу выровнять по высоте, а с table - фон для ссылки не получается задать.
у меня есть ещё третий вариант... засунуть внутрь тега "a" таблицу... но что то мне подсказывает что это как минимум не эстетично... не говоря уже о валидации кода.

так вот у меня вопрос - как это сделать правильно?

Answer 1

[Alexander Mischuk]

Всё довольно просто.
Если первые три условия можно выполнить по-разному, то последнее явно указывает на решение с помощью таблиц. Одинаковая ширина - table-layout: fixed, вертикальное выравнивание - vertical-align: middle, расположение в строку - table-cell. Как работает display: table-cell? Правильно, нужен родитель с display: table. Всё, задача решена.
Можете посмотреть пример.

Comments

[Роман Якушев]

благодарю! я знал про display:table-cell, но не знал про display:table у родителя. никак не приучу себя ежедневно почитывать css справочник в надежде найти что то новое)))