为什么“盒子1”不是居中的？？ 怎么看 padding:10px 上下左右都是10px呢？
为什么“盒子1”不是居中的？？ 怎么看 padding:10px 上下左右都是10px呢？
Dan_j
2014-12-03
4 回答
文字可以通过添加下列代码实现居中：
1 2 | text-align:center;line-height:100px; |
也许下面的代码可以让你更加了解：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>填充</title><style type="text/css">#box1{ width:100px; height:100px; padding:10px; border:1px solid red;}#box2{ background: #ccc; width: 100px; height: 100px; text-align: center; line-height:100px;}</style></head><body><div id="box1"><div id="box2">盒子2</div></div></body></html> |
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>填充</title>
<style type="text/css">
#box1{
width:100px;
height:100px;
padding:10px;
border:1px solid red;
text-align:center;
line-height:5em;
}
</style>
</head>
<body>
<div id="box1">盒子1</div>
</body>
</html>
1 | <br> |
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>填充</title>
<style type="text/css">
#box1{
width:100px;
height:100px;
padding:50px 0px 0px 50px;
border:1px solid red;
}
#box2{
width:50px;
height:50px;
border:1px solid red;
}
</style>
</head>
<body>
<div id="box1">
<div id="box2"></div>
</div>
</body>
</html>
你按照我这样写，你就发现可以居中了
举报
0/150
提交
取消
