HTMLタグを水平または垂直に中央に設定する2つのスキームは、IE 6以外は互換性があります.

2167 ワード

<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>