DIV+CSS之让ul及li水平居中显示

来源:idc311.com时间:2011/4/1

自己突然想搞一个正规一点的,上档次一点的网站建设公司网站,然后其中有个导航需要用到水平居中。一直以为对ul li居中对齐已经掌握了。但最近做项目时发现之前li的float:left方法显然有一个问题,就是无法居中(水平),只能使用padding-left或margin-right的方法方法来固定其居中。但这样可能在宽屏与窄屏的显示不一致。使用这种方法主要是利用li的浮动固定宽度来实现,li的默认display为block,将其这个属性改为inline便可实现这种ul li居中的问题。因为现在的网站大多都使用DIV布局,这种类型的网站也最适合深圳网站优化来做搜索引擎的关键词排名了,所以希望大家也能注意。网上GOOGLE了一下让UL或LI水平居中显示的代码,现在将未知宽度让LI水平居中代码共享CSS如下:

#linknav{height:140px;}

#linknav ul{text-align:center;list-style-type:none;}

#linknav ul li{display:inline;list-style-type:none;}

DIV结构代码如下:

<div id="linknav">

<ul>

<li><a href="#">关于我们</a></li>

<li><a href="#">域名注册</a></li>

<li><a href="#">虚拟主机</a></li>

<li><a href="#">企业邮局</a></li>

<li><a href="#">网站优化</a></li>

<li><a href="#">网站推广</a></li>

</ul>

</div>