问题描述
我的代码如下:<divid="nav"><ul><li><imgsrc="images/nav1.gif"/></li><li><imgsrc="images/nav2.gif"/></li><li><imgsrc="images/nav3.gif"/></li><li><imgsrc="images/nav4.gif"/></li><li><imgsrc="images/nav5.gif"/></li><li><imgsrc="images/nav6.gif"/></li><li><imgsrc="images/nav7.gif"/></li><li><imgsrc="images/nav8.gif"/></li><li><imgsrc="images/nav9.gif"/></li></ul></div>css如下:#nav{width:100%;height:30px;background-color:#1a1a1a;text-align:center;margin:0auto;}#navul{list-style:none;margin:0px;padding:0px;}#navulli{float:left;padding:0px12px;height:30px;line-height:30px;display:inline;}需要的效果是这样的。
解决方案
解决方案二:
把你效果的那个网址发过来
解决方案三:
#navulli{text-align:center;}
解决方案四:
#navulliimg{display:table-cell;vertical-align:middle;}
把img转换成table元素,然后用vertical-align:middle;设置垂直居中这样试试
解决方案五:
引用1楼p2227的回复:
把你效果的那个网址发过来
网站还没上呢。麻烦你自己用我的代码试下。谢谢。
解决方案六:
引用3楼mubeibei的回复:
CSScode#navulliimg{display:table-cell;vertical-align:middle;}把img转换成table元素,然后用vertical-align:middle;设置垂直居中这样试试
这个垂直居中没效果的。。。我测试过了。
解决方案七:
引用2楼dencey的回复:
#navulli{text-align:center;}
这个好像只能针对li中是文字的形式。img不行。。
解决方案八:
引用5楼tianbianyue1227的回复:
引用3楼mubeibei的回复:CSScode#navulliimg{display:table-cell;vertical-align:middle;}把img转换成table元素,然后用vertical-align:middle;设置垂直居中这样试试这个垂直居中没效果的。。。我测试过了。
那只能用maring-top顶了~·既然你外层DIV是固定30px那你就用maring-top顶下吧~·
解决方案九:
或者padding都行
解决方案十:
用padding或者margin控制
解决方案十一:
引用8楼mubeibei的回复:
或者padding都行
谢谢,是的。刚才我用这种方法解决了。同时谢谢其他朋友的热心帮助。
解决方案十二:
自己写的看一下,这里就不贴了
解决方案十三:
height:30px;line-height:30px
解决方案十四:
给li设置margin一个合适的像素