Поместите значок справа в середине элемента списка

Question

У меня есть следующий код, который печатает img, если выбрана текущая страница. У меня проблема в том, что если элемент списка имеет различную высоту, я не могу расположить его в середине элемента списка в крайнем правом углу ...

<li><?php echo $child->link($child->title); ?><?php echo (url_start_with($child->url) ? '<img src="images/ico-arrow.png" class="pointer">': null); ?></li>

как я могу изменить "TOP", чтобы он располагался вертикально независимо от высоты css

#bf-fest-list li { margin:0; padding:5px 25px; position:relative; } 
#bf-fest-list li a:hover {  color:#ec1c23; text-decoration:none; }
#bf-fest-list li.current { background:#a0a1a4; padding:10px 25px; } 
#bf-fest-list li.current a { color:#FFF; } 
#bf-fest-list li .pointer { position:absolute; top:10px; left:233px; } 

Answer 1

Мне удалось это решить ...

Ключ гарантирует, что ли имеет высоту 100%. Затем добавьте отрицательное поле на половину высоты изображения, чтобы выровнять его по вертикали и установите верхнюю позицию: 50%.

Код выше затем изменится на:

#bf-fest-list li { margin:0; padding:5px 25px; position:relative; } 
#bf-fest-list li a:hover {  color:#ec1c23; text-decoration:none; }
#bf-fest-list li.current { background:#a0a1a4; padding:10px 25px; } 
#bf-fest-list li.current a { color:#FFF; } 
#bf-fest-list li .pointer { position:absolute; top:10px; left:233px; } 

Answer 2

Вы можете выровнять элементы уровня блока, используя

margin-top: auto;
margin-bottom: auto;
height: 16px;

Это должно вертикально центрировать ваше изображение. (замените высоту на ваш собственный рост).

В качестве альтернативы вы можете установить свойство вертикального выравнивания родительского элемента в центр.