CSS文字垂直居中

在网页开发中，经常使用css来美化页面的。你知道用CSS如何让文字垂直居中吗？下面来看一下。

操作方法

  • 01

    先写上html代码，如图，内容很简单，就是一个div里有一段文本。

  • 02

    再写上div对应的样式，如图，这里只设置了div的边框和高度，宽度。

  • 03

    如果这里显示的话，我们看下页面，文本是不会水平居中和垂直居中的。

  • 04

    要让文本水平居中，我们可以添加样式：text-align: center; 要让文本垂直居中，我们可以添加样式： vertical-align: middle;和display: table-cell;

  • 05

    添加完这几个样式后，刷新页面可以看到现在的文本已经可水平居中和垂直居中了。

赞 (0)

相关推荐

  • 怎样使div中的行内元素的文字垂直居中?

    怎样使div中的行内元素的文字垂直居中?比如<span><a>等元素.最近在做一个项目的时候,遇到一个div行内元素文字垂直居中的问题,来看看我遇到的问题和解决方法吧. 操作方 ...

  • word文档怎么设置页面文字垂直居中

    Office Word 是一种强大的文字编辑软件,其中的Word 2010可以将文档的页面文字设置为"垂直居中",在文档的首页,我们往往需要将一段或者多段文字在页面设置为" ...

  • WPS表格如何设置文字垂直居中和水平居中显示

    WPS表格是一款功能强大的办公软件,该软件在表格制作和数据统计方面是非常优秀的,我们在使用该软件在进行文字输入时常常需要将其进行垂直居中和水平居中显示,下面我们就来看看是如何设置的吧. 操作方法 01 ...

  • css设置垂直居中多种方法

    在前端开发中内容居中是必不可少的,让我们一起来看一些垂直居中的方案有那么些吧. 操作方法 01 文本内容设置垂直居中. 单行文本, 则可设置 line-height 等于父元素高度. 居中代码: .t ...

  • css给图片添加阴影效果（css文字阴影效果怎么设置）

    css给图片添加阴影效果（css文字阴影效果怎么设置）

    使用CSS3,你可以为文本和元素添加阴影.一.浏览器支持表中的数字指定完全支持该属性的第一个浏览器版本.数字后面的 -webkit- 或者 -moz- 使用时需要指定前缀.属性ChromeFirefo ...

  • css怎么设置字体间距（css文字行间距怎么设置）

    css怎么设置字体间距（css文字行间距怎么设置）

       (原图样式)今天我们讲一下几个文本标签text-indent,letter-spacing和line-height,并附加讲一下first-line和first-letter的使用方法.先上源码 ...

  • CSS水平居中和垂直居中实现方法

    一.CSS 居中 - 水平居中 DIV等标签本身没有定义自己居中的属性,网上很多的方法都是介绍用上级的text-align: center,然后嵌套一层DIV来解决问题.可是这个方法有时候完全不起作用 ...

  • 网页中如何用HTML/CSS实现文字居中于图片

    在网页设计布局中,很多网页设计者都会遇到如何让文字居中于图片的问题.其实,实现这一过程比较简单,只要让图片作为背景图片,再设置文字在 垂直和水平方向上的居中.下面,小编通过一个简单实例,结合自己的,来 ...

  • ppt表格中的文字怎么设置水平居中或垂直居中?

    PPT演示文稿中,我们可以插入或绘制表格,表格中的文字默认为左对齐和顶部对齐.那么,如何设置PPT表格中的文字垂直居中呢?如何设置表格文字水平居中?如何设置表格文字垂直居中?请看下文详细介绍. 一.如 ...