text-align:center和margin:0 auto居中的區別

antzone發表於2017-03-14

本章節介紹一下兩個居中程式碼的作用和區別，儘管比較簡單，可能對於初學者還是可能會造成一定的障礙，也可能會出現兩段程式碼使用混亂的情況，下面就簡要做一下闡述。

一.text-align:center:

此程式碼可以將文字、圖片和內聯元素實現居中效果，並不能夠將塊級元素實現居中。

程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title>  
<style type="text/css">  
div{
  width:150px;
  height:50px;
  background:#CCC;
  text-align:center;
}
</style>  
</head>   
<body>  
<div>螞蟻部落</div>
</body>  
</html>

上面的程式碼可以將div中的文字元素設定為居中效果，當然也是可以設定圖片和內聯元素的。

二.margin:0 auto:

此程式碼能夠將塊級元素設定為居中效果，但是不能夠使用它設定文字、圖片和內聯元素等。

程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title>  
<style type="text/css">  
div{
  width:150px;
  height:50px;
  background:#CCC;
  text-align:center;
  margin:0px auto;
}
</style>  
</head>   
<body>  
<div>螞蟻部落</div>
</body>  
</html>

相關文章