Aligning an image in an unordered list with list items
I have a menu consisting of an unordered list with multiple list items, all of which contain text except the last one, which contains an image. the problem is I want to align the center of the image with the center of the text in other list items, but I can't figure out how to do that. Tried different things with margins, padding and height, but can't seem to figure it out.
Here's the JSFiddle Demo
Html
<div class="menu-main-container">
<ul id="menu-main" class="menu">
<li id="menu-item-1"> <a href=#>Item1</a>
</li>
<li id="menu-item-2"> <a href=#>Item2</a>
</li>
<li id="menu-item-3"> <a href=#>Item3</a>
</li>
<li id="menu-item-4"> <a href=#><img src="http://www.goldcoastjazz.org/images/buttons_icons/More-Details-121x30_copy.jpg"/></a>
</li>
</ul>
</div>
CSS
.menu-main-container ul {
text-align : left;
display : inline;
list-style : none;
text-transform : capitalize;
text-decoration : none;
padding : 0;
margin : 0;
}
.menu-main-container ul li a {
text-transform : capitalize;
text-decoration : none;
color : #000000;
font-weight : bold;
}
.menu-main-container ul li {
display : inline;
position : relative;
cursor : pointer;
padding : 25px;
}
.menu-main-container ul li:hover {
background-color : #003cb3;
}
.menu-main-container ul li:hover > a {
color : #fff;
}
li#menu-item-4:hover {
background-color: white;
}
li#menu-item-4 {
}
li#menu-item-4 a {
}
li#menu-item-4 a img {
}
When working, vertical-align: middle
you must specify line-height:
li#menu-item-4 a {
line-height: 30px;
}
li#menu-item-4 a img {
vertical-align: middle;
}
See this update script .
WORKING FIDDLE
use vertical-align: middle;
Note. You can only use vertical alignment for elements that act like a table. For this you need to change display: table
to parent and display: table-cell
to content + vertical-align: middle;
.
Try the following:
li#menu-item-4 a img {
position: absolute;
transform: translateY(-50%);
top: 50%;
}
.menu-main-container ul li {
position: relative;
display: table-cell;
/* other styles */
}
Working script
Use vertical-align: middle
on your image. See your fiddle fork http://jsfiddle.net/58roatpd/1/