CSS盒子模型外边距详解：实现水平居中与内容居中对齐
最编程
2024-02-13 08:24:19
...
文章目录
- 一、盒子模型水平居中
- 1、盒子水平居中设置
- 2、未居中的代码示例
- 3、居中的代码示例 - 分别设置左右边距
- 4、居中的代码示例 - 复合写法设置左右边距
- 5、居中的代码示例 - 复合写法设置左右边距 2
- 二、盒子内文字、行内元素、行内块元素居中对齐
一、盒子模型水平居中
1、盒子水平居中设置
如果要 将一个 块级元素 的 盒子模型 设置为 水平居中 样式 , 需要设置以下两项 :
- 盒子模型 的 宽度 必须设定 , 也就是 width 属性 ;
- 盒子模型 的 左外边距 和 右外边距 必须 设置为 auto 值 ;
如果没有设置宽度 , 块级盒子自动充满父容器 , 因此 如果要设置水平居中, 必须设置宽度 ;
auto 的含义是 指定的 边距方向 自动充满 ;
2、未居中的代码示例
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>盒子模型水平居中</title>
<style type="text/css">
div {
width: 600px;
height: 400px;
background-color: pink;
/* 文字 水平居中 */
text-align: center;
/* 盒子水平居中 */
}
</style>
</head>
<body>
<div>
盒子模型水平居中
</div>
</body>
</html>显示效果 :
在这里插入图片描述
3、居中的代码示例 - 分别设置左右边距
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>盒子模型水平居中</title>
<style type="text/css">
div {
width: 600px;
height: 400px;
background-color: pink;
/* 文字 水平居中 */
text-align: center;
/* 盒子水平居中 */
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div>
盒子模型水平居中
</div>
</body>
</html>显示效果 :
在这里插入图片描述
缩小浏览器窗口 , 也能居中显示 ;
在这里插入图片描述
4、居中的代码示例 - 复合写法设置左右边距
外边距复合写法 : 设置 1 ~ 4 个 值 , 单位 像素 px ;
- 设置 1 个值 : 设置 上下左右 外边距 ;
- 设置 2 个值 : 设置 上下、左右 外边距 ;
- 设置 3 个值 : 设置 上、左右、下 外边距 ;
- 设置 4 个值 : 设置 上、右、下、左 外边距 ;
使用 margin: auto; , 将四个边距都设置为 auto , 此时左右边距自动就是 auto , 也可以实现水平居中 ;
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>盒子模型水平居中</title>
<style type="text/css">
div {
width: 600px;
height: 400px;
background-color: pink;
/* 文字 水平居中 */
text-align: center;
/* 盒子水平居中 */
margin: auto;
}
</style>
</head>
<body>
<div>
盒子模型水平居中
</div>
</body>
</html>显示效果 :
在这里插入图片描述
5、居中的代码示例 - 复合写法设置左右边距 2
外边距复合写法 : 设置 1 ~ 4 个 值 , 单位 像素 px ;
- 设置 1 个值 : 设置 上下左右 外边距 ;
- 设置 2 个值 : 设置 上下、左右 外边距 ;
- 设置 3 个值 : 设置 上、左右、下 外边距 ;
- 设置 4 个值 : 设置 上、右、下、左 外边距 ;
使用 margin: 0 auto; , 将上下边距设置为 0 像素 , 左右边距设置为 auto ;
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>盒子模型水平居中</title>
<style type="text/css">
div {
width: 600px;
height: 400px;
background-color: pink;
/* 文字 水平居中 */
text-align: center;
/* 盒子水平居中 */
margin: 0 auto;
}
</style>
</head>
<body>
<div>
盒子模型水平居中
</div>
</body>
</html>二、盒子内文字、行内元素、行内块元素居中对齐
设置
text-align: center;样式 , 可以使 盒子内文字、行内元素、行内块元素居中对齐 ;
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>盒子模型水平居中</title>
<style type="text/css">
div {
width: 600px;
height: 400px;
background-color: pink;
/* 文字 水平居中 */
text-align: center;
/* 盒子水平居中 */
margin: 0 auto;
}
</style>
</head>
<body>
<div>
盒子模型水平居中
<strong>行内元素</strong>
<strong>行内块元素</strong>
<input type="text">
</div>
</body>
</html>显示效果 :
在这里插入图片描述