Question

So I have an icon which could be 32px or 48px and next to the icon some text, somewhat of 14px to 18px font-size.

Here is a fiddle: http://jsfiddle.net/nwHjB/

What is the best way to place both in the middle, next to each other, cross-browser without using margin/padding?

Thanks alot

Answer 1

Set the line-height of your <li> to match the height of your image:

.panel_title li{
    list-style:none;
    float:left; 
    margin-left:10px;
    margin-top:-10px;
    display:inline-block;
    line-height:32px; /* To match the icon height */ 
}

http://jsfiddle.net/AlienWebguy/nwHjB/1/