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/

html <ul> <li>标签 - 内联显示</li> </ul>

2 个答案: