сделать элемент в div выровненным по центру

Question

Это живой пример:

http://jsfiddle.net/NjnAF/

div # con - это панель результатов поиска, я хочу, чтобы элемент поиска отображался в виде списка со значком и текстом.

Теперь я не могу заставить значок выравниваться по центру по вертикали и сделать текст «1», «2» только в центре изображения.

Есть предложения?

Answer 1

Использовать line-height - вертикальное выравнивание: элементы уровня блока, такие как div, не влияют на вертикальное выравнивание. Вам нужно будет использовать высоту строки или использовать абсолютное позиционирование с относительным значением div.

Answer 2

Я использовал:

div.item div.img {
   float: left;
   width: 22px;
   height: 25px;
   background-image: url('http://i.stack.imgur.com/NpSHB.gif');
   background-repeat: no-repeat;
   background-position: center left;
   text-align: center;
   vertical-align: middle;
}

и я обновил скрипку . Это то, что вам нужно?

Answer 3

вам нужно изменить CSS

    div.item div.img{ text-align:center;
                      margin-top:2px;  /*can change this according to your need */
                    }

Добавить эти два свойства.Вертикальное выравнивание не будет работать.Скрипка http://jsfiddle.net/NjnAF/2/