CSS problem with unordered list
Posted: Mon Feb 18, 2013 4:18 am
I can't get an image and the text vertically aligned in an unordered list (seems to be a recurring problem for me). I tried vertical-allign : middle on the li and a few other tricks I found around the internet to no avail
here's the html
and the css
Currently it looks like the image attached
here's the html
Code: Select all
<ul id="sortme" class="ui-sortable">
<li id="aisle_6">
<img class="handle" alt="move" src="http://webrecipemanager.com/images/arrow_down_up.png">
Herbs & Spices
</li>
<li id="aisle_5">
<img class="handle" alt="move" src="http://webrecipemanager.com/images/arrow_down_up.png">
Nuts
</li>
<li id="aisle_10">
<img class="handle" alt="move" src="http://webrecipemanager.com/images/arrow_down_up.png">
Meat
</li>
</ul>
Code: Select all
#sortme li {
margin-bottom:3px;
height:35px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: 1px solid #5d0304;
padding:2px 5px 0 5px;
text-decoration:none;
background:#eba8a0;
width:200px;
color:#FFFFFF;
cursor:pointer;
font-size:13px;
}