首页 前端知识 25.盒子模型_居中页面

25.盒子模型_居中页面

2025-03-03 13:03:42 前端知识 前端哥 790 671 我要收藏

● 让所有的元素居中之前,我们应该将所有的元素都放在一个盒子里面(div),但是这个盒子不需要有任何的语义。
在这里插入图片描述
在这里插入图片描述

● 当然我们还需要给这个盒子起一个名字,方便我们在CSS中定义它

 <div class="container">

● 之后我们来给盒子一个宽度,来调整整体的宽度

.container {
  width: 700px;
}

在这里插入图片描述

● 所有的元素宽度都不会超过父元素的宽度

● 接着我们来设置页面居中

.container {
  width: 700px;
  margin-left: auto;
  margin-right: auto;
}

这意味着左边和右边需要调整到一样的大小,这样页面就居中了
在这里插入图片描述

● 当然最优的是速记减少代码的写法

.container {
  width: 700px;
 margin: 0 auto;
}  
转载请注明出处或者链接地址:https://www.qianduange.cn//article/22454.html
标签
HTML5 CSS3
评论
发布的文章

如何修改电脑mac地址?

2025-03-03 13:03:33

C 数组:深入解析与应用

2025-03-03 13:03:28

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!