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

2020-04-30 14:31:54易采站长站整理

XML/HTML Code复制内容到剪贴板

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

css代码:

CSS Code复制内容到剪贴板

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

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

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

html代码:

XML/HTML Code复制内容到剪贴板

<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代码:

CSS Code复制内容到剪贴板

<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文本之间的间隔)*/