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

第一种：

html代码：

<div class="wrap"> 
  <table>
   <tbody>
    <tr>
     <td>
      <ul class="test">
       <li><a href="#">1</a></li>
       <li><a href="#">2</a></li>
       <li><a href="#">3</a></li>
       <li><a href="#">4</a></li>
       <li><a href="#">5</a></li>
      </ul>
     </td>
    </tr>
   </tbody>
  </table>
 </div>

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代码：

<div class="wrap">
  <ul class="test">
   <li><a href="#">1</a></li>
   <li><a href="#">2</a></li>
   <li><a href="#">3</a></li>
   <li><a href="#">4</a></li>
   <li><a href="#">5</a></li>
  </ul>
 </div>

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