Встроенный список CSS требует ширины, высоты и выравнивания по вертикали, для переключения фонового изображения при наведении, используя спрайт

Question

Я разместил соответствующий код на http://cssdesk.com/QSwDG

Спрайт (в коде упоминается как 'circle.png') находится по адресу: http://i54.tinypic.com/34jas79.png

Цели: - Получить элементы списка встроенными, сохраняя размер каждого 60x60. - Чтобы нижняя часть спрайта отображалась при наведении каждой ссылки: вокруг ссылки должен появиться круг. - Для вертикального центрирования текста в каждом контейнере 60 х 60.

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

Спасибо

Answer 1

@ caseyc

Для горизонтальной и вертикальной централизации, попробуйте:

li{
  float:left;
  width:60px;
  height:60px;
  border:1px dotted green;
  display:block;
  text-decoration:none;
  display:table;
}

a.roll{
  vertical-align:middle;
  display:table-cell;
  text-align:center
}

Теперь создайте свойство background для "a.roll".

Cleber.

Answer 2

хорошо ... если вам не нужно поддерживать IE <8, тогда вы можете использовать <code>display:table-cell;. Я не совсем разбираюсь в display:table, поэтому я просто запустил li s.

http://cssdesk.com/3hKth

a.roll{
    ...
    vertical-align: middle;
    display: table-cell;
}