CSS文字垂直居中

html-css015

CSS文字垂直居中,第1张

01

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

02

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

03

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

04

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

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

05

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

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的<style>标签中，输入css代码：p {border: 1px solid #0b93d5height: 30pxpadding: 10px}。

3、浏览器运行index.html页面，此时每个部分的文字距离上边界和下边界的距离是相等的。