为什么没有水平居中显示？
<!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>
个回答
-
- qq_凯歌笑_0
- 2017-01-11 16:13:57
你设置的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>