text-align:center與margin:0px auto的區別

admin發表於2017-02-18
text-align:center與margin:0px auto都有居中效果，但是它們的區別是巨大的。

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">
.parent{
  width:300px;
  height:300px;
  border:1px solid red;
}
.mytest{
  width:100px;
  height:100px;
  border:1px solid green;
  text-align:center;
}
</style>
</head>
<body>
<div class="parent">
  <div class="mytest">螞蟻部落</div>
</div>
</body>
</html>

以上程式碼在IE6IE7瀏覽器中不但文字居中而且子div也居中對齊，但是在其他標準瀏覽器中只有文字是水平居中。

margin:0px auto能夠將物件本身在所在的父物件中居中對齊，並且在適用於所有瀏覽器。程式碼例項如下: 

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.parent{
  width:300px;
  height:300px;
  border:1px solid red;
}
.mytest{
  width:100px;
  height:100px;
  margin:0px auto;
  border:1px solid green;
}
</style>
</head>
<body>
<div class="parent">
  <div class="mytest">螞蟻部落</div>
</div>
</body>
</html>

以上程式碼中子div將在父div中居中對齊。

相關文章