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

来源：互联网发布：淘宝网页版登录编辑：程序博客网时间：2024/06/04 17:39
<style>ul{list-style:none;margin:0;padding:0;}table{margin:0 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:#316ac5;color:#fff;border:1px solid #316ac5;text-decoration:none;}.test a:hover{background:#fff;color:#315ac5}</style><div class="warp"><table>    <tbody>        <tr><td class="warp">            <ul class="test">                <li><a href="#">1</a></li>                <li><a href="#">2</a></li>                <li><a href="#">3</a></li>            </ul>                 </td></tr>    </tbody></table></div><div class="warp"><table>    <tbody>        <tr><td class="warp">            <ul class="test">                <li><a href="#">1</a></li>                <li><a href="#">2</a></li>                <li><a href="#">3</a></li>                <li><a href="#">2</a></li>                <li><a href="#">3</a></li>            </ul>                 </td></tr>    </tbody></table></div><style>.warp2{background:#000;width:500px;height:100px;}.test2{ text-align:center;padding:5px }.test2 li{ display:inline;}.test2 li a{padding:2px 6px;background:#316ac5;color:#fff;border:1px solid #9C6;text-decoration:none;}.test2 li a:hover{background:#fff;color:#000}</style><div class="warp2">        <ul class="test2">        <li><a href="#">1</a></li>        <li><a href="#">2</a></li>        <li><a href="#">3</a></li>        <li><a href="#">4</a></li>    </ul></div><style>.warp3{background:#ccc;width:500px;height:50px;}.test3{padding-top:5px;float:left;position:relative;left:50%; clear:both}.test3 li{float:left;display:inline;margin-right:5px;position:relative;left:-50%;}.test3 li a{float:left;width:20px;height:20px;text-align:center;line-height:20px;background:#316ac5;color:#fff;border:1px solid #316ac5;text-decoration:none;}.test3 li a:hover{background:#fff;color:#316ac5;}    </style>  <div class="warp3">         <ul class="test3">        <li><a href="#">1</a></li>    </ul>        <ul class="test3">        <li><a href="#">1</a></li>        <li><a href="#">2</a></li>             </ul>        <ul class="test3">        <li><a href="#">1</a></li>        <li><a href="#">2</a></li>        <li><a href="#">3</a></li>             </ul>        <ul class="test3">        <li><a href="#">1</a></li>        <li><a href="#">2</a></li>        <li><a href="#">3</a></li>        <li><a href="#">4</a></li>    </ul></div>
转摘自： http://www.cnblogs.com/jinbiao/archive/2012/01/06/2314280.html