Position an icon on the right in the middle of a list item

Question

I have the following code which prints an img if the current page is selected. The issue i have is if the list item is a varied height i cant position it in the middle of the list item on the far right...

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

how can i ammend the "TOP" so that it will position itself vertically no matter what the height using 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

You can align block-level elements using

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

This should vertically center your image. (replace height with your own height).

Alternatively you can set the vertical-align property of the parent element to center.

Answer 2

I managed to solve it...

The key is making sure the li has a height of 100%. Then add a negative margin half the height of the image to align it vertically and put a position of top:50%.

The above code then changes to:

#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; }