请求CSS高手帮忙:如下图,如何让文字相对图片居中呢?图片是作为ul的背景插入的

html-css012

请求CSS高手帮忙:如下图,如何让文字相对图片居中呢?图片是作为ul的背景插入的,第1张

最好还是把图片用img放到文字前面,然后属性里面给vertical-align:middle

PS如果你不想把图片用img插入,喜欢用背景的话,那么就把文字的line-height跟那个图片的高度一致,这样,后面的文字相对图片就是居中的。

=w=,三个方法……

一:把ul或li 中的行高删掉。

二:修改图片,把那红色的画下一点,可做成gif透明图(如原本图为:16*16,可画成:16*21,红色部分在最底部。)。

三:去掉list-style-image属性,改为在li 中用 background 属性

如:

ul{list-style:none}

li{padding-left:18pxbackground:url(pot.gif) no-repeat left 5px}

以上……

.fff

{

margin-top:-20px

height:20px

....

}

<div id="slideshow">

<ul>

<li><img src="img\1.jpg" alt="" /></li>

<li class="fff">1</li>

<li><img src="img\2.jpg" alt="" /></li>

<li class="fff">2</li>

<li><img src="img\3.jpg" alt="" /></li>

<li class="fff">3</li>

<li><img src="img\4.jpg" alt="" /></li>

<li class="fff">4</li>

</ul>

</div>