页面中实现Div居中的方法

页面中实现Div居中的方法,第1张

如果能在页面中能将Div设置成居中模式,那么对于网页页面整体效果就很正规,那么我们如何实现将页面中的Div居中呢?大家可以用以下介绍的方法试一试

步骤如下:

1、在HTML中的body标签里面写上div标签对<div></div>

页面中实现Div居中的方法,第2张


2、在给div设置宽高,需要注意,如果不设置宽度默认是100%的哦,这样就会占满整个页面

页面中实现Div居中的方法,第3张


3、如果能在页面中能将Div设置成居中模式,那么对于网页页面整体效果就很正规,那么我们如何实现将页面中的Div居中呢?大家可以用以下介绍的方法试一试

步骤如下:

1、在HTML中的body标签里面写上div标签对<div></div>

页面中实现Div居中的方法,第2张


2、在给div设置宽高,需要注意,如果不设置宽度默认是100%的哦,这样就会占满整个页面

页面中实现Div居中的方法,第3张


3、再给div加上深粉色的背景颜色,这样是方便我们可以直观的看到div的布局

页面中实现Div居中的方法,第6张


4、然后预览div布局的预览效果,看得出来,div默认是靠近浏览器左边的,距离右边很远,这样就不是居中对齐

页面中实现Div居中的方法,第7张


5、接着我们给div设置margin,第一个参数表示顶部的距离为0,而第二个auto表示的是自动。也就是说,设置这个之后,div会自动根据网页来居中

页面中实现Div居中的方法,第8张


6、之后,再来浏览效果,可以看到此时的div块已经自动居中了,它距离浏览器左右两边的距离是一样的

页面中实现Div居中的方法,第9张

DABAN RP主题是一个优秀的主题,极致后台体验,无插件,集成会员系统
网站模板库 » 页面中实现Div居中的方法

0条评论

发表评论

提供最优质的资源集合

立即查看 了解详情