CSS 设置技巧(单位和值与样式设置技巧)

2020-05-06 09:22:25易采站长站整理

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

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

  举例如下:

  html代码:

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

<span style="font-family: 楷体; font-size: 14pt;"><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></span><span style="font-family: 楷体; font-size: 14pt;"> </span>  

除了上一节讲到的插入table标签,可以使不定宽块状元素水平居中之外,本节介绍第2种实现这种效果的方法,改变元素的display类型为行内元素,利用其属性直接设置。

第二种方法:改变块级元素的 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代码:   
    
<style>  
.container{   
    text-align:center;   
}   
/* margin:0;padding:0(消除文本与div边框之间的间隙)*/   
.container ul{