為什么沒有水平居中顯示？
<!DOCTYPE HTML>
<html>
<head>
? ?<meta charset="utf-8">
? ?<style type="text/css">
? ? div{
? ? ? ? border:2px solid red;
? ? ? ? width:500px;
? ? ? ? margin:10px auto;
? ? ? ? height:100px;
? ? ? ? line-height:100px;
? ? }
? ?</style>
? ?<title>定寬居中</title>
</head>
<body>
<div>i want to be in the middle.</div>
</body>
</html>
2017-01-11
你設置的margin:10px auto;代碼代表的是塊狀元素的居中（div 邊框 截圖中紅色邊框確實實現了居中）
文字屬于行內元素，因此居中應該設置為 text-align:center
<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8">
? ?<title>定寬居中</title>
? ?<style type="text/css">
div{
? ? ? ? ? ?border:2px solid red;
width:500px;
margin:10px auto;
height:100px;
line-height:100px;
}
? ? ? ?.textCenter{
? ? ? ? ? ?text-align: center;
}
? ?</style>
</head>
<body>
? ?<div class="textCenter">i want to be in the middle.</div>
</body>
</html>