【CSS】盒子模型外边距 ② ( 盒子模型水平居中 | 盒子内文字、行内元素、行内块元素居中对齐 )

韩曙亮

发布于 2023-03-30 19:46:23

1.1K0

发布于 2023-03-30 19:46:23

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

文章目录

一、盒子模型水平居中

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>

显示效果 :