从何设置CSS，让多行嵌套DIV水平也能居中？
CSS布局中，主要使用DIV来进行分块展示，让DIV内的元素水平居中，简单的设置text-align属性就可以，但是DIV内嵌套多行DIV居中又该如何呢？本文从简单到多行一步一步教您。
操作方法
- 01
简单的DIV居中方法，使用margin:0 auto;即可实现，如下。如果想让DIV内的内容居中，设置text-align:center就可以
- 02
DIV嵌套一行DIV，一行内包含了多个DIV，可以使用float:left来设置。如果发现DIV自动换行了，那么就是宽度出问题了，将宽度调整即可。设置合适的宽度就可以让div放在一行
- 03
上面的步骤，计算了border，如果不让border也计算在DIV宽度内，需要设置属性 box-sizing: border-box;
- 04
那如果是多行DIV呢，要是，每个DIV都需要设置宽度的话，太不科学了，而且太多了，不好扩展，就会出现下面的问题。设置了text-align：center,也不起作用
- 05
转换一下思路，将DIV变成跟普通的元素一直，可以通过text-align来控制就可以了。display:inline-block;出场了，让DIV跟普通的元素一样，就可以通过text-align来设置了，而且还会自动换行。注意不要使用float属性了。
- 06
最终的效果图如下，DIV内的元素，自动换行，而且一直是居中的。
相关推荐
-
DW中如何设置CSS面板
dreamweaver中如何设置CSS面板 操作方法 01 首先这里我们是需要你新建一个HTML文档的,这里我们直接打开工具,之后选择新建HTML即可 02 建立完毕之后这里我们使用快捷键,Shift ...
-
HTML设置CSS时class和id的用法与区别是什么？
初学者在接触CSS时候肯定会遇到这样的问题,class可以用来设置css,id也可以用来设置css,那么他们有什么区别呢?下面就给大家实际操作一下,就可以非常清楚的看到这两者的区别了. 操作方法 01 ...
-
如何设置Windows默认命令行窗口大小和缓冲区大小
如何设置Windows默认命令行窗口大小和缓冲区大小 Windows 命令行 cmd 窗口系统默认的大小(80*40)对于现在的屏幕配置已经跟不上时代了，我们总是要把它改大些，而且缓冲区大小也想改得大 ...
-
word中如何设置文本的首行缩进呢?
word使用得十分广泛,其中很多小技巧会给我们工作带来很多便利,在文档的处理中经常用到首行缩进,那么我们该如何实现首行缩进呢?下面小编就为大家详细介绍一下,来看看吧! 步骤 1.新建一个word 2. ...
-
androidstudio怎么设置代码永远显示行数处理?
android studio怎么设置代码永远显示行数处理?eclipse显示代码行数的话,只需要在代码左侧右键→Show Line Numbers即可,Android Studio设置代码行以后,如果 ...
-
Word2016如何设置行距、首行缩进？
office2016办公软件现在很多朋友在使用了,但是大家用word处理一些内容的时候,行距有时候不太合适,想要自己设置为自己需要的合理行距怎么设置呢,当然使用过word低版本的朋友应该熟悉,这里小编 ...
-
一招教你在2019版wps中设置模板默认首行缩进
相信很多小伙伴在日常办公中都会用到wps,在其中如何才能设置模板默认首行缩进呢?方法很简单,下面小编就来为大家介绍.具体如下:1. 首先,打开电脑上的wps.进入后,点击页面上端的"开始&q ...
-
怎么在百度地图app中设置开启车牌限行提醒功能
今天小编来教大家怎么在百度地图app中设置开启车牌限行提醒功能具体如下:1. 第一步,选择进入"百度地图".2. 第二步,选择上方最左侧"个人中心"标志.3. ...
-
如何在高德地图app中设置导航避开限行？
如今我们出行都喜欢使用高德地图来进行导航,可是我们应该如何在应用中设置导航避开限行呢?今天,小编就教大家在高德地图app中设置导航避开限行.具体如下:1. 我们先打开手机中的高德地图app,如图.2. ...
