第一步：父层设置文本居中属性

ul{     text-align:center; } 

第二步：li设置内联样式

li{     display:inline; } 

PS

只需以上两步就可以实现导航栏居中显示了，但为了美观好看，可以稍微加点料。以下供参考

<style type="text/css">     body{         background:#232e3c;         padding:16px;     }     #nav ul{         text-align:center;         list-style:none;     }     #nav li{         display:inline;         margin-left:16px;         background:#fff;         border-radius:25px;         padding:10px;     }     #nav a{			         color:#000;         text-decoration:none;         font-size:18px;         font-weight:bold;         font-family:consolas;     }     #nav li:hover{         background:#7bc3d6;     } </style> 

• list-style:none; 取消列表前面的列表样式
• border-radius:25px; 设置圆角背景样式
• text-decoration:none; 取消链接下划线
• li:hover 设置一下鼠标移上去时的背景变色

—-想了解更多的css相关样式处理怎么解决关注<计算机技术网(www.ctvol.com)!!>