在无序列表，列表项对齐图像 [英] Align image in unordered list with list items

问题描述

我具有由无序列表与在它们都包含文本除了最后一个多个列表项的菜单，一个包含一个图像。问题是，我想，以配合在其它列表项的文本的中心图像的中心，但我无法弄清楚如何做到这一点。 尝试不同的东西用的margin，padding和高度，但似乎无法弄清楚

下面是一个 的jsfiddle演示

HTML

 ＆LT; D​​IV CLASS =菜单主容器＆GT;
    ＆LT; UL ID =菜单主打类=菜单＆GT;
        ＆LT;李ID =菜单项-1＆GT; ＆所述; A HREF =＃＆GT;项目1＆所述; / a取代;

        ＆LT; /李＆GT;
        ＆LT;李ID =菜单项-2＆GT; ＆所述; A HREF =＃＆GT;项目2＆所述; / a取代;

        ＆LT; /李＆GT;
        ＆LT;李ID =菜单项-3＆GT; ＆所述; A HREF =＃＆GT;项目3＆所述; / a取代;

        ＆LT; /李＆GT;
        ＆LT;李ID =菜单项-4＆GT; ＆所述; A HREF =＃＆GT;＆所述; IMG SRC =htt​​p://www.goldcoastjazz.org/images/buttons_icons/More-Details-121x30_copy.jpg/＆GT;＆所述; / a取代;

        ＆LT; /李＆GT;
    ＆LT; / UL＆GT;
＆LT; / DIV＆GT;
 

CSS

 。菜单，主容器UL {
    文本对齐：左;
    显示：内联;
    列表样式：无;
    文本转换：利用;
    文字修饰：无;
    填充：0;
    保证金：0;
}
。菜单，主容器UL李一{
    文本转换：利用;
    文字修饰：无;
    颜色：＃000000;
    字体重量：大胆的;
}
。菜单，主容器UL李{
    显示：内联;
    位置：亲属;
    光标：指针;
    填充：25像素;
}
。菜单，主容器UL李：悬停{
    背景颜色：＃003cb3;
}
。菜单，主容器UL李：悬停＆GT;一个 {
    颜色：#FFF;
}
李＃菜单项-4：悬停{
    背景颜色：白色;
}
李＃菜单项，4 {
}
李＃菜单项-4 {
}
李＃菜单项-4 IMG {
}
 

解决方案

有关垂直对齐：中间获得工作，您必须指定的line-height：

李＃菜单项-4 {     的line-height：30PX; } 李＃菜单项-4 IMG {     垂直对齐：中间; }

请参阅此更新拨弄。

I have a menu consisting of an unordered list with multiple list items where they all contain text except the last one, that one contains an image. the problem is that I want to align the center of the image with the center of the text in the other list items but I can't figure out how to do it. Tried different thing with the margin, padding and height but can't seem to figure it out

Here's a 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 {
}

解决方案

For vertical-align: middle get working, you must specify a line-height:

li#menu-item-4 a {
    line-height: 30px;
}
li#menu-item-4 a img {
    vertical-align: middle;
}

See this update fiddle.

这篇关于在无序列表，列表项对齐图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！