慕后端5233451
2019-03-06 11:02
<!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;
}
</style>
</head>
<body>
<div id="box1">盒子1</div>
</body>
</html>
不居中是因为字体的高宽是有固定大小的,而达不 到的部分实际用空白取代了呢 可通过设置参数来实现
text-align;
line-height;
通过浏览器的检查是可以查看空白部分的盒子模型的
那是因为你已经设定盒子的尺寸是100×100。而后面padding:10px只能控制左填充距离10,上填充距离10。
并不是说设置了padding四个方向相同就居中的 你可以试试不设置padding看看它的初始状态 再分别改变四个方向 可以看到它是在初始状态下再改变距离的 可以自己动手试一下
你要水平垂直都居中的话要加两行css代码
text-align:center;
line-height:100px; //要和height属性设置的值相同
因为要设置test-align:center才能居中位置
初识HTML(5)+CSS(3)-升级版
1225811 学习 · 18234 问题
相似问题
回答 5
回答 1
回答 3
回答 1
回答 2