如何实现DIV文字的居中(水平+竖直)

今天为大家分享使用css实现div居中的方法,希望能够帮助大家。

操作方法

  • 01

    在需要居中的div上级,增加一个父级div,并且添加属性“text-align: center;”;如果你需要当前div的文字居中,那么你还需要在当前div中增加属性“text-align: center;”。

  • 02

    text-align: center的意思是水平居中。 修改完成后,效果如图,我们的图片仍然没有居中,二是靠左显示。

  • 03

    找到我们需要居中的div标签,增加属性“ margin-left: auto; margin-right: auto; ”;

  • 04

    第三步的效果是让css自动为你调整位置,由于父div已经设置居中,所以这时候的界面会自动居中,效果如图

  • 05

    这时候的代码仍然不是最完美的,因为仔细看一下上图的图片,div中的文字是靠上对齐,而不是居中的。所以我们需要在div中设置height和line-height高度相同。

  • 06

    第五步修改完成后,效果如图,这时候div中的文字已经完美居中了。

  • 07

    以上是我用css解决div文字居中的办法,希望能帮助到大家。

(0)

相关推荐

  • 如何在PPT中水平/竖直镜像翻转图片

    操作方法 01 首先插入一张图片,这个不多说了.方法有很多,直接拖动图片到PPT相应位置,或者点击插入→图片. 02 选择格式,在格式下面有一个旋转.这个就可以解决常用的水平/竖直翻转图片. 03 如 ...

  • 更改word2007表格内的文字方向横向变成竖直纵向

    介绍一种更改word2007表格内的文字方向将横向变成纵向的方法,以供参考. 操作方法 01 例如要更改图中表格内的文字方向. 02 先在要更改文字方向的单元格内点击鼠标,点击后word菜单栏会出现& ...

  • ps文字怎么居中对齐

    ps文字怎么居中对齐?PS若想要文字在图层中居中对齐的话,需要使用到排版工具 操作方法 01 打开PS,并选择文字工具 02 在画布上任意位置单击,然后创建一段文字 03 选择::移动工具 04 将文 ...

  • word表格中文字无法居中怎么办

    word表格中文字无法居中怎么办,想必对大家来说很想了解这方面的内容,下面小编给大家分享一下,希望可以帮助到大家. 操作方法 01 点击菜单栏的"插入",建一个空白表格. 02 输 ...

  • word表格文字上下居中的方法

    小编在日常工作中经常遇到很多童鞋们在编制word表格时,不能把word表格中的文字上下居中,只能做到水平居中,下面小编就这个问题分享一下自己总结一个实用方法. 操作方法 01 双击打开需要把文字设置成 ...

  • CDR文字怎么居中、靠边对齐、强制性对齐

    在CDR里排文字时,怎么快速把文字居中对齐或是靠边对齐,为了好看,不对齐的文字要强制性对齐呢? 操作方法 01 打开CDR软件 02 输入一段文字,一般段落文字都是靠左对齐 03 选中文字,点击 水平 ...

  • excel表格如何使文字上下左右居中

    excel表格如何使文字上下左右居中呢?很多人都不会,下面小编来教大家. 操作方法 01 首先,我们打开我们电脑上面的excel,然后我们在一个单元格中输入我: 02 之后,我们选中这个单元格,然后右 ...

  • 怎么让html中只有竖直滚动条没有水平滚动条?

    很简单,用CSS样式把水平滚动条隐藏起来.但是这个兼容性我还没有测试过. 水平滚动条隐藏: html{overflow-x:hidden} 同理,竖直滚动条隐藏:html{overflow-y:hid ...

  • WPS文字如何让表格里的文字上下居中

    首先选中你要调整位置的文字 点击图中红色箭头所示的小方块 在弹出的段落窗口里找到段前,段后设置,我们可以看到现在的设置是段前0,段后10,所以文在偏上. 我们只需要把段后的10磅,平均到段前和段后里面 ...