从何设置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内的元素,自动换行,而且一直是居中的。

(0)

相关推荐

  • 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. ...