CSS水平居中

一、使用CSS水平居中的三种情况 。

 1、行内元素（文本、图片等）；

 2、定宽块状元素 ；

 3、不定宽块状元素（3种方法）；

二、具体解决方法。

 1、行内元素（文本、图片等）：

      给父元素设置 text-align：center;

 2、定宽块状元素 ：

<style>
div{
     border:1px solid blue;
     width:350px;
     height:20px;
     margin:20px auto;  /*水平居中：上下方向有20px的margin值，左右方向的等margin值由浏览器自动设置*/
   }
</style>
<body>
      <div>这是个定宽块状元素，居中显示</div>
</body>

 3、不定宽块状元素（3种方法）：

 （1）为需要水平居中的元素加table标签；然后为table设置样式： table{margin:0 auto;}

 （2）将块级元素转换为内联元素（eg：div{display：inline；}）；然后使用text-align:center;来实现居中

<style>
     .container{text-align:center;}
     .container ul{
                    list-style:none;
                    margin:0;
                    padding:0;
                    display:inline;
                  }
     .container li{
                    margin-right:8px;
                    display:inline;
                  }
</style>
<body>
    <div class="container">
      <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
      </ul>
    </div>
</body>

 （3）给父元素设置float:left; position:relative; left:50%;

         子元素设置position:relative; left:-50%  来实现水平居中

<style>
     .container{
                        float:left;
                        position:relative;
                        left:50%;
                    }
     .container ul{
                           list-style:none;
                           margin:0;
                           padding:0;
                           position:relative;
                           left:-50%;
                       }
     .container li{
                           display:inline;
                           float:left;     /*有无都可*/
                       }
</style>
<body>
    <div class="container">
      <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
      </ul>
    </div>
</body>

 

posted @ 2016-03-19 19:43  名字被占用。  阅读(248)  评论(0)  编辑  收藏  举报