Clever Geek Handbook

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 {
}
0


source to share


4 answers


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 .

+1


source


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;

.

+1


source


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

0


source


Use vertical-align: middle

on your image. See your fiddle fork http://jsfiddle.net/58roatpd/1/

0


source






More articles:


All Articles