CSS水平居中总结(新手必看篇)

2017-03-07 13:45:21 css
下面小编就为大家带来一篇CSS水平居中总结(新手必看篇)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

行内元素

如果被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的。

html代码:

<body>    
  
<div class="txtCenter">我想要在父容器中水平居中显示。</div>    
  
</body> 

css代码:
<style>     
  
.txtCenter{   
  
    text-align:center;     
  
}    
  
</style> 

块状元素

定宽块状元素

定宽块状元素:块状元素的宽度width为固定值。

满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。

html代码:


    <body>     
      
    <div>我是定宽块状元素,哈哈,我要水平居中显示。</div>    
      
    </body>  

css代码:

    <style>    
      
    div{       
      
        border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/           
      
        width:200px;/*定宽*/       
      
        margin:20px auto;/* margin-left 与 margin-right 设置为 auto */    
      
    }    
      
     </style>  

也可以写成:
margin-left:auto;    
  
margin-right:auto;

注意:元素的“上下 margin” 是可以随意设置的。

不定宽块状元素

1. 加入 table 标签

利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度(table其长度根据其内文本长度决定),因此可以看做一个定宽度块元素,然后再利用定宽度块状居中的margin的方法,使其水平居中。

第一步:为需要设置的居中的元素外面加入一个 table 标签 ( 包括 、、 )。

第二步:为这个 table 设置“左右 margin 居中”(这个和定宽块状元素的方法一样)。

html代码:

<div>  
 <table>  
   <tbody>  
     <tr><td>  
     <ul>  
         <li>我是第一行文本</li>  
         <li>我是第二行文本</li>  
         <li>我是第三行文本</li>  
     </ul>  
     </td></tr>  
   </tbody>  
 </table>  
</div> 

css代码:

    <style>    
        table{   
            border:1px solid;    
            margin:0 auto;    
        }    
    </style>  

2. 设置 display: inline 方法:与第一种类似,显示类型设为行内元素,进行不定宽元素的属性设置

改变块级元素的 display 为 inline 类型(设置为 行内元素 显示),然后使用 text-align:center 来实现居中效果。如下例子:

html代码:

<body>  
 <div class="container">  
    <ul>  
        <li><a href="#">1</a></li>  
        <li><a href="#">2</a></li>  
        <li><a href="#">3</a></li>  
    </ul>  
 </div>  
</body> 

css代码:
<style>    
.container{   
    text-align:center;   
 }    
/* margin:0;padding:0(消除文本与div边框之间的间隙)*/    
.container ul{   
    list-style:none;   
    margin:0;   
    padding:0;   
    display:inline;   
 }    
/* margin-right:8px(设置li文本之间的间隔)*/    
.container li{   
    margin-right:8px;   
    display:inline;   
 }   
 </style> 

3. 设置 position:relative 和 left:50%:利用相对定位的方式,将元素向左偏移 50% ,即达到居中的目的

通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left: -50% 来实现水平居中。

代码如下


    <body>  
     <div class="container">  
        <ul>  
            <li><a href="#">1</a></li>  
            <li><a href="#">2</a></li>  
            <li><a href="#">3</a></li>  
        </ul>  
     </div>  
    </body>  

css代码:

    <style>    
    .container{   
        float:left;   
       position:relative;   
      left:50%    
    }    
     .container ul{   
        list-style:none;   
        margin:0;   
        padding:0;   
        position:relative;   
        left:-50%; }    
    .container li{   
        float:left;   
        display:inline;   
        margin-right:8px;   
    }   
    </style>  

还有一种方法:

    .container{   
      
        position: absolute;   
        top:50%;   
        left:50%;   
      
        margin:-170px -250px; /*container宽500px,高340px*/  
      
    }  

以上这篇CSS水平居中总结(新手必看篇)就是小编分享给大家的全部内容了,希望能给大家一个参考