为什么“盒子1”不是居中的？？怎么看 padding:10px 上下左右都是10px呢？-慕课网

首页课程实战体系课手记专栏慕课教程

为什么“盒子1”不是居中的？？怎么看 padding:10px 上下左右都是10px呢？

来源：12-12 宰相肚里能撑船 - 使用padding为盒子设置内边距（填充）

Dan_j

2014-12-03 18:56

为什么“盒子1”不是居中的？？怎么看 padding:10px 上下左右都是10px呢？

写回答关注

4回答

One_Cj: 2015-01-08 14:04:16

已采纳

文字可以通过添加下列代码实现居中：

text-align:center;
line-height:100px;

也许下面的代码可以让你更加了解：

<!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>

2 1

Dan_j

非常感谢！

2015-01-23 11:00:58

共 2 条回复 >

啊小贝

2015-03-31 16:24:56
<!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>
0 0
掉线宝宝

2015-01-21 09:51:29

<!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 0
偌颜宁

2014-12-03 19:13:03

如果所写的值小于本身的值的话，那么不会改变

1 0

Wither...

我可以说我还是没听懂吗？。。。。。

2014-12-20 15:54:29

共 1 条回复 >