方法一：利用display:inline-block掌握

这个方法比较大略，是将容器转成display:inline-block行内块级元素，然后就可以直接用text-align:center使其达到水平居中效果。
HTML代码中须要一个div来包围这个导航菜单。

方法二：利用position:relative办理

jsp中如何让div导航栏居中多种办法来实现网站导航程度居中 RESTful API

position:relative定位方法来让元素水平居中，一样平常来说

方法三：利用display:table办理

HTML代码实例

<ul class=\"大众navbar\"大众>

<li><a href=\"大众/\公众>Home</a></li>

</ul>

CSS代码实例

.navbar {

display:table;

margin:0 auto;

}

.navbar li {

display:table-cell;

}

.navbar li + li {

padding-left:20px;

}

方法四：利用display:inline-flex办理

HTML代码实例操作

<div class=\公众navbar\公众>

<ul>

<li><a href=\"大众/\公众>Home</a></li>

</ul>

</div>

CSS代码代码编写

.navbar {

text-align:center;

}

.navbar > ul {

display:-webkit-inline-box;

display:-moz-inline-box;

display:-ms-inline-flexbox;

display:-webkit-inline-flex;

display:inline-flex;

}

.navbar li + li {

margin-left:20px;

}

提示：浏览器兼容问题，目前这个代码不支持IE7及以下版本的IE浏览器。

实在这些方法很好的办理了网站导航菜单居中的问题，利用CSS编写有助于后期的修正，极大的方便了我们的操作和节省了宝贵的韶光。
在往后的内容中，

原创文章出自畅想网络，转载地址：http://www.e-wkj.cn/xw/2316.html