<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#outer{
width:300px;
height:200px;
background-color: #008000;
margin:auto;/*外边距盒子居中*/
padding:50px;/*内边距-->使中间盒子居中*/
margin-top: 100px;/*外上边距*/
}
#inner{
width:200px;
height:200px;
background-color: #FA8072;
margin: auto;
text-align: center;/*文本水平居中*/
/*vertical-align: middle;设置元素的垂直对齐方式。*/
line-height:200px;/*文本垂直居中*/
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">我在这</div>
</div>
</body>
</html>
CSS盒子嵌套和文字内容居中
最新推荐文章于 2024-07-04 14:16:26 发布