HTML <ul><li> 標簽-嵌入式顯示

Question

在html文件中，我有一個列表設置為：

<div id="sep1">
       <ul>
         <li><img id="rm_img_1" src="images/remove.png"></li>
         <li id="rm_txt_1">Remove Section</li>
       </ul>
</div>

鏈接內的圖片的寬度和高度均為25px。 在CSS中，我有：

#sep1 ul li {
    display:inline;}

#rm_img_1{
    padding-top:0px;
    padding-right:5px;
    padding-left:5px;}

#rm_txt_1{
    padding-top:0px;
    padding-left:5px;
    margin-bottom:5px;}

文字與我在圖像周圍全部剪切的圖像不符。 如何使文本和圖像水平對齊？

Answer 1

嘗試添加

vertical-align: middle;

在#rm_img_1

那應該使它們兩者對齊。

小提琴： http : //jsfiddle.net/ypov8r84/

Answer 2

基於400x400px的照片，每個li的寬度必須相同。 所以用這個代替

#sep1 ul li { display:inline-block; width: 400px; text-align:center;}

這是： http : //jsfiddle.net/daz3dg53/