怎样让html中的文字垂直水平居中显示

制作网页的时候,为了使页面更加美观,前端工程师一般会把文字水平垂直居中,那么怎样让html中的文字垂直水平居中显示呢?

操作方法

  • 01

    如图,先在HTML编辑器里面写上一些基础代码,这里我就不多说了。

  • 02

    接着在body标签里面添加一个div标签,div里面有文字,并且使用style标签来设置div的样式。Div的样式我设置为宽高200像素,背景为红色。

  • 03

    接着在网页中预览文件,可以看到文字默认是左对齐。

  • 04

    接着我们在div的样式里面写上“text-align: center; line-height: 200px;”,text-align: center;表示水平居中,line-height: 200px;表示垂直居中,line-height的属性要根据文字所在的标签的高度来设置,比如我的文字是在div里面,div是200px,就设置200px,如果你的div或者其他标签是400px,就设置400px。

  • 05

    最后,再来预览效果,文字已经水平垂直居中了。

(0)

相关推荐

  • 如何让word文本框中的文字垂直上下居中

    文本框是一个计算机系统工具,在Word中文本框是指一种可移动.可调大小的文字或图形容器.下面向大家介绍如何让word文本框中的文字垂直上下居中. 操作方法 01 点击"插入"选项, ...

  • Wps中快速设置单元中的文字为“竖排”显示的方法

    wps是我们日常生活和工作经常使用的一款软件,下面给大家讲讲WPS中快速设置文字为"竖排"显示的方法.具体如下:1. 第一步,在电脑上打开WPS,打开任意一个文档,我们这里打开图示 ...

  • 怎么在腾讯文档中对文档中的文字设置突出显示

    我们在使用腾讯文档进行文件编辑的时候,遇到需要对文档中的文字设置突出显示的情况,该怎么操作呢?今天就跟大家介绍一下怎么在腾讯文档中对文档中的文字设置突出显示的具体操作步骤.1. 首先打开电脑,找到腾讯 ...

  • Powerpoint 2016如何让文本框中的文字分栏显示

    本介绍如何让PPT中的文本框里的文字可以分栏显示. 操作方法 01 对于普通插入的文本框,当我们在其中输入一段文字后,这段文字默认是单栏显示的,下面介绍如何让文本框中的文字分栏显示.首先选中需要设置的 ...

  • 怎么解决Word中标题文字上面部分显示不全的问题

    有时候我们在对Word文档进行编辑时候,会出现标题中的上部分文字显示不全的现象,这是什么原因造成的呢?又如何解决呢?下面跟着小编一起来看看吧! 操作方法 01 录入文字后,调整好标题字号,却发现标题字 ...

  • 如何在一个单元格中让文字分成两行显示

    美观需求,有时候,需要将文字在一个单元格子中分两行显示,如何做到呢? 操作方法 01 首先在单元格中输入必须要完整的文字. 02 我们发现,在中间敲击空格键文字并不会因为单元格子小而换行,敲击回车也无 ...

  • excel2016表格中的文字怎么倾斜显示?

    在Excel的运用中,有时我们想要使表格看起来更美观,而表头在整个表格中有着很重要的地位,做好表头也是使表格美观重要的一步.那么怎么样制作图片上这样倾斜的表头,让表格美观又直观呢?今天小编来跟大家说一 ...

  • Word文本框中的文字如何设置竖排显示

    今天给大家介绍一下Word文本框中的文字如何设置竖排显示的具体操作步骤.1. 首先打开电脑上想要编辑的Word文档,如图,进入编辑页面后,将想要设置的[文本框]选中,右键,在打开的菜单中,选择[设置形 ...

  • 怎样更改word中的文字方向

    我们在阅读杂志时发现有时杂志中的文字是横排显示的,有时是竖排显示的,文字的方向是怎样设定的呢?下面小编就来告诉大家. 操作方法 01 第一步我们是打开电脑,找到office 2007 word的快捷方 ...