css---块级盒子水平居中与盒子里的文本居中
程序员文章站
2024-02-29 21:52:04
...
块级盒子水平居中条件：
（1） 盒子必须要有宽度
（2）盒子左右外边距设置为auto
margin-left: auto;
margin-right: auto;
如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距</title>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
2、盒子内容文本居中对齐 text-align: center;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距</title>
<style>
div{
width: 600px;
height: 300px;
background-color: pink;
/*盒子居中对齐*/
margin-left: auto;
margin-right: auto;
/*盒子内容文本居中对齐*/
text-align: center;
}
</style>
</head>
<body>
<div>apple</div>
</body>
</html>
上一篇： Web 前端学习(一) 之html
下一篇： Druid通俗易懂的理解