您的位置:首页 > Web前端 > HTML

把HTML标签设置成水平或垂直居中的二种方案除IE6外都兼容

2013-07-22 13:38 459 查看
<style>
/* HTML标签CSS修饰 */
div,img,p,ul,ol,dl,li,dt,dd,h1,h2,h3,h4,h5,h6,span,p,a,sub,sup,strong,em,label,header,footer,nav,menu,aside,figure,figcaption,section,article,time,address,hgroup{margin:0px;padding:0px;}
ul,ol,li{list-style-type:none;}img{border:none;}
h1,h2,h3,h4,h5,h6,sub,sup{font-weight:normal;font-size:12px;}
a{text-decoration:none;color:#333;}a:hover{text-decoration:underline;color:#CC0000;}
body{font-family:Tahoma, Geneva, sans-serif, 'Microsoft Yahei'}
b,strong{font-weight:normal;}em,i,cite{font-style:normal;}

   /**
    *   兼容IE7-IE10 FF Chrome Sarfiar
    *   水平和垂直居中组件
    *   不兼容IE6 需要在boxc-r这标题设置 _margin-left:宽度/2
    *   第种方案:用a标签,外层标签设置text-align:center;
    */
.jz .jz-r,.jz .jz-l,.jz .jz-t,.jz .jz-b,.jz .jz-rl,.jz .jz-tb{position:relative;}.jz{position:absolute;}  
.jz .jz-r,.jz .jz-rl{float:left;left:50%;}.jz .jz-l,.jz .jz-tb{left:-50%;}
.jz .jz-t,.jz .jz-b,.jz .jz-rl{top:50%;}.jz .jz-tb{top:-50%;}

.f1-btn2 li{display:inline;float:left;cursor:pointer;width:10px;height:10px;margin-left:3px;text-indent:-99999px;border-radius:5px;background-color:#C5C5C5;overflow:hidden;}
.f1-btn2 .f1-on{background-color:#6EBEB0;}
</style>

<div style=" width:940px;margin:0px auto;">
  <div class="w940 jz" style="background:red;width:940px;height:20px;">
    <div class="jz-r" style="_margin-left:-180px;">
      <ul class="jz-l f1-btn2" >
        <li class="f1-on"></li>
        <li>1</li>
        <li>2</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
      </ul>
    </div>
  </div>
</div>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: