码迷,mamicode.com
首页 > Web开发 > 详细

CSS入门指南——页面的水平居中

时间:2018-05-11 13:02:02      阅读:155      评论:0      收藏:0      [点我收藏+]

标签:png   span   技术分享   com   布局   设置   一个   bubuko   分享图片   

 我们经常看到这样的网页,即内容水平居中在屏幕中间,左右留白。我们来给这样的布局起个名字——水平居中布局

 技术分享图片

其实要实现这样的布局十分简单,即给中间部分一个宽度,设置margin左右值为auto,如,中间部分class="main"

.main{
   width:1200px;
  margin:0 auto;  
}

这样,中间部分就以1200px的宽度水平居中了,当屏幕宽度小于1200时,会自动覆盖

 


补充一下关于  margin——页面外边距 和 padding——页面内边距  的知识,请看另一篇随笔。

http://www.cnblogs.com/tanghm/p/9022923.html

 

CSS入门指南——页面的水平居中

标签:png   span   技术分享   com   布局   设置   一个   bubuko   分享图片   

原文地址:https://www.cnblogs.com/tanghm/p/9022901.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!