垂直对齐不与文本

我在HTML有一个列表设置对齐列表样式图片如下：垂直对齐不与文本

<ul id="remove"> 
<li id="rm_txt_1" onClick="remove_1();">Remove </li> 
</ul> 


<ul id="move"> 
<li id="mv_txt_1" onClick="position();">Move Down</li> 
</ul>

铺有下面的CSS代码：

#remove{ 
    list-style-image:url(../images/remove.fw.png); 
    padding-left:30px; 
    margin-top:15px; 
    vertical-align:middle;} 

#move{ 
    list-style-image:url(../images/mvdown.fw.png); 
    padding-left:30px; 
    margin-top:15px; 
    vertical-align:middle;} 

#rm_txt_1, #mv_txt_1{ 
    padding-left:5px; 
    cursor:pointer; 
    font-size:14px; 
    vertical-align:middle;}

虽然我曾考虑过“垂直对齐：中间;”敌我所有的“UL”和“礼” S的结果看起来很笨拙如下：

enter image description here

来源

2014-10-09 SRYZDN

你试过去除vertical-align：middle;从图像？尝试包含行高; – ssilas777 2014-10-09 09:03:37

尝试包含行高; – Aru 2014-10-09 09:05:25

无法控制'list-style-image'的位置。一种选择是[使用'background-image']（http://stackoverflow.com/questions/18452697/list-items-with-bullets-on-top/18452737#18452737）。 – 2014-10-09 09:07:15

的line-height属性添加到你的CSS代码#remove和#move，与您的图像的高度。

来源

2014-10-09 09:07:03 ghorg12110

感谢您的回答，但它不起作用 – SRYZDN 2014-10-09 09:13:35

使您的文字变大，使其与图像具有相同的高度。
或
给它一个背景图像并用填充来定位它。

li{  
background: url(../images/remove.fw.png) 
    padding: 5px 0px 5px 10px; 
    margin: 0; 
    list-style: none; 
}

编辑：line-height会将文字向下推，而不是向上。

来源

2014-10-09 09:08:56 Nick

你正在对齐中间，但你也有你的填充将它推向右边。删除你的填充，看看是否有帮助。

来源

2014-10-09 12:20:40 tommydevs

垂直对齐不与文本

回答

相关问题