CSS文字垂直居中

html-css013

CSS文字垂直居中,第1张

01

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

02

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

03

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

04

要让文本水平居中,我们可以添加样式:text-align: center

要让文本垂直居中,我们可以添加样式: vertical-align: middle和display: table-cell

05

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

可以使用css的width标签实现一列的文字竖排显示。

具体步骤如下:

需要准备的材料分别是:电脑、浏览器、ultraedit。

1、在ue编辑器中新建一个空白的html文件,css文件。

2、在ue编辑器中输入以下html代码。

3、在ue编辑器中输入以下css代码。

4、编辑完成以后,在ue编辑器中点击保存,格式选择UTF8无BOM。

5、在浏览器中打开此html文件,可以看到最终想要实现的一列的文字竖排显示效果。