И снова вертикальное выравнивание

[Gaspode]

У меня вот задача: четыре блока в ряд, каждый блок целиком — ссылка. Текст выровнен по центру. Сейчас так сделано:

<nav class="extra__list">
	<a class="extra__unit extra__unit_view_1" href="#ex1">Раз</a>
	<a class="extra__unit extra__unit_view_2" href="#ex2">Два</a>
	<a class="extra__unit extra__unit_view_3" href="#ex3">Три</a>
	<a class="extra__unit extra__unit_view_4" href="#ex4">Четыре</a>
</nav>

.extra__list { display: table; width: 100%;}
	.extra__unit { display: table-cell; height: 122px; width: 25%; text-align: center; vertical-align: middle; font-size: 24px; border-radius: 3px; padding: 0 30px;}

Всё бы хорошо, но тут выяснилось, что нужно позиционирование относительно этих блоков. Что делать?

line-height руками подбирать — не вариант, потому что текста разное количество в каждом блоке и в любой момент может измениться.

Картинки приложу. Вот что сейчас есть:

а вот такая реакция на наведение мне нужна:

Тень — фиг с ней. Сам этот зум как сделать? Я в тупике.

[Gaspode]

Спасибо Softlink'у за решение

[Softlink]

Может кто подскажет, как сократить кол-во оберток, будет любопытно посмотреть.

[br3t]

У меня получилось нечто вроде

.extra__list { 
    display: table;
    width: 100%;
}
.extra__unit {
    display: table-cell;
    height: 122px;
    width: 25%;
    text-align: center;
    vertical-align: middle;
    font-size: 24px;
    border-style:solid;
    border-width:10px 5px;
    border-color:#FFF;
    background:green;
}
a:hover {
 border-color:green;
}

Но тут отступы между блоками, никакой бордер-радиус и проч

Зато просто

[Softlink]

br3t, так а где увеличение размера блока на ховере?

[troll]

Вроде бы получилось на 1 обертку меньше, если только я не упустил каких-либо деталей: http://jsfiddle.net/ys9hd/.

[Gaspode]

letter-spacing: -0.31em;

word-spacing: -0.43em;

А эт что о_О?

[troll]

Это копипаст из темы про БЭМ, должно убирать пробелы между инлайн-блоками.

Edited January 6, 2012 by troll

[Softlink]

Насчет выцеливания блоков одновременно маржинами и position не знаю, хорошо ли это, но за фокус с псевдоэлементом, плюс

Получается, что мы можем в любом диве отцентировать текст по вертикали.

upd эх, не все так гладко оказалось. Но все равно прикольно, я даже и не задумывался никогда, чтобы так сделать. Может еще надо покопать в этом направлении, глядишь, что и выйдет. Голова только уже не соображает

Edited January 6, 2012 by Softlink

[troll]

Фокус не мой, о нем еще 2 года назад здесь же писал Great Rash.

[SelenIT]

Если абстрагироваться от формы круголков при наведении, без допоберток получилось как-то так. В старье, естественно, "изяшная деградация".

letter-spacing: -0.31em;

word-spacing: -0.43em;

Это черная магия. Letter-spacing тут ни при делах, за пробелы отвечает word-spacing, а от бага в вебкитах помогает как раз display:table для контейнера. Хотя в данном случае, поскольку шрифт ссылок всё равно в пикселях задается, можно и font-size контейнеру обнулить, грубо, но действенно. Если уж от человеческого решения — честно убрать злополучные пробелы в коде — какие-то высшие соображения отталкивают...

[troll]

SelenIT, здорово! А можно как-нибудь зафиксировать размер ячеек, чтобы они не прыгали при наведении? Тьфу, извиняюсь, затупил...

Edited January 6, 2012 by troll

[Gaspode]

SelenIT, здорово! А можно как-нибудь зафиксировать размер ячеек, чтобы они не прыгали при наведении? Тьфу, извиняюсь, затупил...

Хм, а по-моему резонный вопрос. Скачут же.

[troll]

table-layout: fixed должен помочь: http://jsfiddle.net/LFUcJ/

Edited January 6, 2012 by troll

[Gaspode]

Не знаю, должен ли. Не помогает, только портит)

[SelenIT]

Скачут не ячейки, скачет текст (из-за шрифта при наведении). Ячейки распирает только при сжатии таблицы донельзя, когда самое длинное слово упирается в паддинги (можно при наведении их просто уменьшить хоть до нуля).

А вот border-collapse: collapse в FF9 дает забавный фичеглюк

Кстати, если под новые браузеры — можно же, по идее, "в лоб" transform заюзать (а под IE8 попробовать старый добрый zoom либо фильтры)...

[Softlink]

Если абстрагироваться от формы круголков при наведении, без допоберток получилось как-то так. В старье, естественно, "изяшная деградация".

У меня была идея с добавлением на ховере псевдоэлемента с тенью, но я отказался от нее, т.к. все упирается в фон. Оно же подходит только для однородного.

[br3t]

br3t, так а где увеличение размера блока на ховере?

Блок увеличивается визуально за счёт перекрашивания границ http://jsfiddle.net/6XEKm/