css中设置div居中显示的方法

我们进行页面开发的时候,最经常用的就是div标签了,那么div中的内容如何居中显示呢,下面小编给大家分享一下。

操作方法

  • 01

    首先我们用sublime先创建一个html,并且在html里面加入div,如下图所示

  • 02

    然后我们在div中加入一些文字,如下图所示,文字用span包裹起来

  • 03

    运行页面程序以后我们会看到文字在div的左上角,并没有居中的效果,如下图所示

  • 04

    接下来我们就需要用CSS给div中的内容设置居中了,如下图所示,通过text-align和line-height实现

  • 05

    最后运行界面程序,我们看到div中的内容这次水平和垂直都居中了,如下图所示

(0)

相关推荐

  • 设置div中的div居中显示

    有些浏览器会不兼容一些设置方法让div中的div居中,那么怎样通用的设置div中的div居中,兼容各种浏览器呢? 操作方法 01 <div style="text-align:cent ...

  • 一招教你使Excel表格中的小数点居中显示

    相信很多小伙伴在日常办公中都会用到Excel,如果我们想要使其中的小数点居中显示该怎么做呢?方法很简单,下面小编就来为大家介绍.具体如下:1. 小编这里就以下图所示表格中的G列为例.2. 将G列数值所 ...

  • 手机微信如何让朋友圈中个性签名居中显示

    我们在朋友圈中是会显示自己的个性签名的,今天小编就告诉大家手机微信如何让朋友圈中个性签名居中显示.具体如下:1. 首先我们打开手机中的 微信,在打开的窗口中输入自己的账号和密码进行登录.2.当进入主界 ...

  • 如何在手机端QQ浏览器中设置锁定横屏显示?

    相信很多小伙伴都有在使用QQ浏览器,在其中如何才能设置锁定横屏显示呢?方法很简单,下面小编就来为大家介绍.具体如下:1. 首先,打开手机上的"QQ浏览器".进入首页后,点击下端中间 ...

  • 如何在iPhone苹果手机中设置原彩显示

    今天,小编给大家分享在iPhone苹果手机中设置原彩显示的方法,希望对大家有所帮助.具体如下:1. 首先,请大家在自己的手机中找到[设置]图标,点击进入主界面.2. 第二步,接下来,我们需要选择屏幕中 ...

  • 如何在pr中设置序列一直显示

    有的小伙伴在使用pr软件时,保存了编辑好的序列,但是关掉该软件再打开时,发现序列不见了,因此想要设置序列一直显示,但是却不知道如何设置,那么小编就来为大家介绍一下吧.准备测试1. 第一步,双击或者右击 ...

  • 如何在word中设置全屏显示

    电脑版Word软件被很多人使用,用来编辑文档等,有的用户在编辑文档时,想要设置全屏显示,但是却不知道如何设置,那么小编就来为大家介绍一下吧.具体如下:1. 第一步,右击桌面空白处,接着点击弹出窗口中的 ...

  • css div居中显示

    html制作网页时,经常会遇到div居中显示的问题.div的水平居中.垂直居中.文字居中等,在此做一个简单的总结,希望能有所帮助. 1.通过设置margin-left和margin-right,div ...

  • word文档中设置段落对齐方式的方法

    我们都知道Word文档中有很多对齐方式,比如左对齐,右对齐,居中等等,下面就给大家讲讲设置段落对齐方式的方法.具体如下:1. 第一步,在电脑上打开需要进行段落对齐方式设置的文档,然后点击软件左上角的& ...