国产色在线视频-国产色综合一区二区三区-国产身材极品喷水 在线播放-国产深夜福利视频观看-国产深夜福利视频在线-国产深夜福利视频在线播放

網(wǎng)頁里怎么處理css水平居中問題

2016/9/5 8:56:41   閱讀：1402    發(fā)布者：1402

1、水平居中設(shè)置-行內(nèi)元素

        通過父元素設(shè)置 1 text-align:center; ，讓父元素的內(nèi)容居中

2、水平居中設(shè)置-定寬塊狀元素

        塊狀元素的寬度width為固定值，通過設(shè)置“左右margin”值為“auto”來實現(xiàn)居中的

        例子：

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>定寬塊狀元素水平居中</title> 
<style> 
div{ 
    width: 200px;/*固定的寬度*/ 
    margin: 20px auto;/*左右margin設(shè)置為auto*/ 
    border: 1px solid red; 
} 
</style> 
</head> 
<body> 
<div>我是定寬塊狀元素，我要水平居中顯示。</div> 
</body> 
</html>

3、水平居中設(shè)置-不定寬塊狀元素

      方法1. 加入 table 標(biāo)簽

      例子：

 1 <!DOCTYPE HTML> 
 2 <html> 
 3 <head> 
 4 <meta charset="utf-8"> 
 5 <title>不定寬塊狀元素水平居中</title> 
 6 <style> 
 7 table{ 
 8     margin:0 auto; 
 9 } 
10 /*下面是任務(wù)區(qū)代碼*/ 
11 .wrap{ 
12     background:#ccc; 
13 } 
14 </style> 
15 </head> 
16 <body> 
17 <table> 
18   <tbody> 
19     <tr><td> 
20         <div class="wrap"> 
21             我要水平居中   
22         </div> 
23     </td></tr> 
24   </tbody> 
25 </table> 
26  
27 </body> 
28 </html>

 

      方法2. 設(shè)置 display:inline; 方法，與第一種類似，顯示類型設(shè)為行內(nèi)元素，
進行不定寬元素的屬性設(shè)置

      例子：

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>不定寬塊狀元素水平居中</title> 
<style> 
.container{text-align:center;} 
.container ul{list-style:none;margin:0;padding:0;display:inline;} 
.container li{margin-right:8px;display:inline;} 
</style> 
</head> 

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

 

      方法3. 設(shè)置  position:relative  和  left:50% 利用相對定位的方式，將元素向左偏移 50% ，
即達到居中的目的

      例子：

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>不定寬塊狀元素水平居中</title> 
<style> 
/*下面是代碼任務(wù)區(qū)*/ 
.wrap{ 
    clear:both; 
    float:left; 
    position:relative; 
    left:50% 
    } 
.wrap-center{ 
    background:#ccc; 
    position:relative; 
    left:-50%; 
} 
</style> 
</head> 

<body> 
<!--下面是代碼任務(wù)區(qū)--> 
<div class="wrap"> 
    <div class="wrap-center">我們來學(xué)習(xí)一下這種方法。</div> 
</div> 
</body> 
</html>

【 微信掃一掃 】

文章分類

相關(guān)新聞

熱門標(biāo)簽