<ul id="kqkuu"></ul>

網頁里怎么處理css水平居中問題

2016/9/5 8:56:41 閱讀：1674 發布者：1674

1、水平居中設置-行內元素

通過父元素設置 1 text-align:center; ，讓父元素的內容居中

2、水平居中設置-定寬塊狀元素

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

例子：

<!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設置為auto*/ 
    border: 1px solid red; 
} 
</style> 
</head> 
<body> 
<div>我是定寬塊狀元素，我要水平居中顯示。</div> 
</body> 
</html>

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

方法1. 加入 table 標簽

例子：

 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 /*下面是任務區代碼*/ 
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. 設置 display:inline; 方法，與第一種類似，顯示類型設為行內元素，
進行不定寬元素的屬性設置

例子：

<!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. 設置 position:relative 和 left:50% 利用相對定位的方式，將元素向左偏移 50% ，
即達到居中的目的

例子：

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

<body> 
<!--下面是代碼任務區--> 
<div class="wrap"> 
    <div class="wrap-center">我們來學習一下這種方法。</div> 
</div> 
</body> 
</html>