垂直對齊不與文本

我在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

垂直對齊不與文本

回答

相關問題