三种不确定宽度的块级元素的水平居中方法

最新推荐文章于 2023-03-21 11:02:24 发布

weixin_30610755

最新推荐文章于 2023-03-21 11:02:24 发布

阅读量139

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wjly/p/4414900.html

第一种：

html代码：

css样式：

ul{list-style:none;margin: 0;padding: 0;}
table{margin-left:auto;margin-right:auto;}
.test li{float: left;display: inline;margin-right: 5px;}
.test a{float: left;width:20px;height:20px;text-align: center;line-height: 20px;background:#3161c5;color:#fff;border:1px solid #316ac5;text-decoration:none;}
.test a:hover{background:#fff;color:#316ac5;}

第二种：

html代码：

css样式：

ul{list-style:none;margin:0;padding:0;}
.wrap{background:#000;width:100%;height:100px;}
.test{text-align: center;padding:5px;}
.test li{display:inline;}
.test a{padding:2px 6px;background:#316ac5;color:#fff;border:1px solid #316ac5;text-decoration:none;}
.test a:hover{background:#fff;color:#316ac5;}

第三种：

html代码同第二种相同。

css样式：

ul{list-style:none;margin:0;padding:0;}
.wrap{background:#000;width:100%;height:100px;}
.test{clear:both;padding-top:5px;float:left;position:relative;left:50%;}
.test li{float:left;display:inline;margin-right:5px;position:relative;left:-50%;}
.test a{float:left;width:20px;height:20px;text-align:center;line-height:20px;background:#316ac5;color:#fff;border:1px solid #316ac5;text-decoration:none;}
.test a:hover{background:#fff;color:#316ac5;}

转载于:https://www.cnblogs.com/wjly/p/4414900.html