当前位置：首页 → 问答吧 → 困扰许久，<li>设置左浮动后如何在<div>里自适应水平居中?

困扰许久，<li>设置左浮动后如何在<div>里自适应水平居中?

时间：2010-05-08

来源：互联网

<div>里插入了<ul>，然后<li>设置左浮动，于是问题就出现了，<li>无论如何都不能居中，（调margin和padding也做不到完美居中，不同浏览器下差距明显）努力搜索后也没有一个明确的解决办法，尝试过利用相对定位分别设置ul和li左浮动，然后ul 左移动50%再让li右移动50%，但这个办法也不能解决，困扰小弟许久，请各路大侠帮下，感激不尽！

<head> <style> div{ width:950px; border:1px #CCC solid; } ul{ list-style-type:none; } li{ float:left; } img{ border:none; } span{ display:block; } </style> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>如何水平居中?</title> </head> <body> <div> <ul class="pic"> <li><a href="#"><img src="http://pcued.com/car.jpg"/></a>namenuber</li> <li><a href="#"><img src="http://pcued.com/car.jpg"/></a>namenuber</li> <li><a href="#"><img src="http://pcued.com/car.jpg"/></a>namenuber</li> <li><a href="#"><img src="http://pcued.com/car.jpg"/></a>namenuber</li> <li><a href="#"><img src="http://pcued.com/car.jpg"/></a>namenuber</li> <li><a href="#"><img src="http://pcued.com/car.jpg"/></a>namenuber</li> </ul> </div> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 iamnat 于 2010-5-8 10:52 编辑 ]

作者: iamnat 发布时间: 2010-05-08

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>new document</TITLE> <META http-equiv=Content-Type content="text/html; charset=utf-8"> <META content="MSHTML 6.00.2900.5945" name=GENERATOR></HEAD> <BODY> <STYLE> { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px } BODY { TEXT-ALIGN: center } DIV { BORDER-RIGHT: #ccc 1px solid; BORDER-TOP: #ccc 1px solid; BORDER-LEFT: #ccc 1px solid; WIDTH: 950px; BORDER-BOTTOM: #ccc 1px solid } UL { DISPLAY: inline; FLOAT: left; WIDTH: 900px;height:100px; LIST-STYLE-TYPE: none; TEXT-ALIGN: center } LI { FLOAT: left; WIDTH: 120px;MARGIN: 0px auto;TEXT-ALIGN: center;margin:0 7px 0 7px ; } IMG { BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none } SPAN { FLOAT: left; MARGIN-LEFT: 5px } </STYLE> <DIV> <UL class=pic> <LI><a href="#"><IMG src="http://pcued.com/car.jpg"></A>namenuber </LI> <LI><a href="#"><IMG src="http://pcued.com/car.jpg"></A>namenuber </LI> <LI><a href="#"><IMG src="http://pcued.com/car.jpg"></A>namenuber </LI> <LI><a href="#"><IMG src="http://pcued.com/car.jpg"></A>namenuber </LI> <LI><a href="#"><IMG src="http://pcued.com/car.jpg"></A>namenuber </LI> <LI><a href="#"><IMG src="http://pcued.com/car.jpg"></A>namenuber </LI> </UL></DIV></BODY></HTML>
提示：您可以先修改部分代码再运行

不知道对不对

菜鸟的第一次回答

[ 本帖最后由 mu0001 于 2010-5-8 10:17 编辑 ]

作者: mu0001 发布时间: 2010-05-08

非常感谢，不过问题还是没有解决。利用margin和padding调整还是做不到真正意义上的居中的，你运行下你的代码仔细看一下右边还是比左边的空白大，在ie6,ie8,火狐浏览器下，差距很明显

[ 本帖最后由 iamnat 于 2010-5-8 09:50 编辑 ]

作者: iamnat 发布时间: 2010-05-08

观望中

……好像都是通过调margin和padding让它固定居中。

作者: mu0001 发布时间: 2010-05-08

都设置浮动了，怎么还能居中？？

除非调 margin或者padding的值

作者: reafagon 发布时间: 2010-05-08

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> new document </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <head> <style> div{ width:950px; height:100px; border:1px solid #f00; } ul{ list-style-type:none; margin:0 auto; width:685px; height:100%; border:1px solid #00C; } li{ float:left; margin-left:5px; width:108px; } img{ float:left; border:none; } span { float:left; margin-left:5px;} </style> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>如何水平居中?</title> </head> <body> <div> <ul class="pic"> <li><a href="#"><img src="http://pcued.com/car.jpg"/></a>namenuber</li> <li><a href="#"><img src="http://pcued.com/car.jpg"/></a>namenuber</li> <li><a href="#"><img src="http://pcued.com/car.jpg"/></a>namenuber</li> <li><a href="#"><img src="http://pcued.com/car.jpg"/></a>namenuber</li> <li><a href="#"><img src="http://pcued.com/car.jpg"/></a>namenuber</li> <li><a href="#"><img src="http://pcued.com/car.jpg"/></a>namenuber</li> </ul> </div> </body> </html> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 sBai 于 2010-5-8 10:27 编辑 ]

作者: sBai 发布时间: 2010-05-08

LZ的意思是li自适应水平居中

作者: mu0001 发布时间: 2010-05-08

感谢6楼好心关注不过还是没有解决里面的div左右padding不相等

作者: iamnat 发布时间: 2010-05-08

恩我就是这个意思已经弄了两天了还是没有解决郁闷中..

作者: iamnat 发布时间: 2010-05-08

<head> <style> div{ width:720; border:1px #CCC solid; } ul{ list-style-type:none; } li{ float:left; } img{ border:none; } span{ display:block; } </style> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>如何水平居中?</title> </head> <body><center> <div> <ul class="pic"> <li><a href="#"><img src="http://pcued.com/car.jpg"/></a>namenuber</li> <li><a href="#"><img src="http://pcued.com/car.jpg"/></a>namenuber</li> <li><a href="#"><img src="http://pcued.com/car.jpg"/></a>namenuber</li> <li><a href="#"><img src="http://pcued.com/car.jpg"/></a>namenuber</li> <li><a href="#"><img src="http://pcued.com/car.jpg"/></a>namenuber</li> <li><a href="#"><img src="http://pcued.com/car.jpg"/></a>namenuber</li> </ul> </div><center> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 zhqy 于 2010-5-8 17:01 编辑 ]

作者: zhqy 发布时间: 2010-05-08

功能：center标签用于对其所包括的文本进行水平居中。

语法：<center>...</center>

<center>标签已不赞成使用，应该用CSS样式表替代它。

HTML与XHTML之间的差异：

在HTML 4.01中，center元素不被赞成使用。

在XHTML 1.0 Strict DTD中，center元素不被支持。

用不用看LZ

作者: mu0001 发布时间: 2010-05-09

困扰许久，<li>设置左浮动后如何在<div>里自适应水平居中?

热门阅读

热门下载