盒子实现水平居中

最新推荐文章于 2022-12-30 16:33:48 发布

lucky lures

最新推荐文章于 2022-12-30 16:33:48 发布

阅读量2.1k

点赞数

分类专栏： HTML系统学习文章标签：三种方法实现盒子的水平居中

本文链接：https://blog.csdn.net/weixin_43862765/article/details/100608889

版权

有兴趣的可以看我的github地址：https://github.com/wangzhichao2019/-web-

①text-align:center;可以实现盒子里面的内容（文字，行内元素，行内块元素）居中对齐
②margin：0 auto;表示的是盒子的左右是auto（自动）的，距离上边框的距离是0
③margin-left:auto;表示盒子整体左边区域充满，盒子整体效果是在右边
④margin-right:auto;表示盒子右边区域自动充满，盒子紧靠左边（和浏览器默认界面是一样的）
⑤在盒子里面不更改样式的话，盒子里面的内容是和浏览器一样宽的

一、笔记：

<!DOCTYPE html>
<html lang = "en">
<head>
	<meta charset = "utf-8">
	<title>2019年9月7日</title>
	<style>
		div
		{
			text-align:center;/
			width: 300px;
			height: 100px;
			background-color: pink;/*现在可以看到文字依然是居中的,但是盒子并不是居中的*/
			margin: 0 auto;
			padding-top: 100px;
			/*margin-left: auto;   margin-right:auto;*/
			/*
			 所以，水平居中的另一种实现方法是将上面的两种都写上：
			 margin-left:auto࿱

最低0.47元/天解锁文章

lucky lures

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
2
评论
盒子实现水平居中

有兴趣的可以看我的github地址：https://github.com/wangzhichao2019/-web-①text-align:center;可以实现盒子里面的内容（文字，行内元素，行内块元素）居中对齐 ②margin：0 auto;表示的是盒子的左右是auto（自动）的，距离上边框的距离是0 ③margin-left:auto;表示盒子整体左边区域充满，盒子整体效果是在右边...
复制链接

扫一扫