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

韩曙亮

已于 2023-03-18 22:33:48 修改

阅读量1.8k

点赞数 3

分类专栏： CSS 文章标签： css html 前端盒子模型外边距盒子模型水平居中

于 2023-03-18 22:22:35 首次发布

本文链接：https://blog.csdn.net/shulianghan/article/details/129640952

版权

CSS 专栏收录该内容

142 篇文章 41 订阅

订阅专栏

文章目录

一、盒子模型水平居中
二、盒子内文字、行内元素、行内块元素居中对齐

一、盒子模型水平居中

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>