css怎么让文字居中


本文摘自PHP中文网,作者藏色散人,侵删。

css让文字居中的方法:首先创建一个HTML示例文件;然后在body中定义一些文字内容;最后通过“text-align”或“line-height”属性实现文字水平或垂直方向居中即可。

本文操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。

  • 使用text-align属性来使文字水平居中

text-align属性规定元素中的文本的水平对齐方式,通过使用center值设置文本居中。

text-align是一个基本的属性,它会影响一个元素中的文本行互相间的对齐方式。值left、right和center会导致元素中的文本分别左对齐、右对齐和居中,想要使文本居中,直接使用center即可。

该属性设置文本和img标签等一些内联对象(或与之类似的元素)的居中。

该属性有如下几个特点:

1)、text-align的center应用在一个容器上,它只针对容器里面的文字以及容器里面的display为inline或者inline-block的容器,如果里面的容器display为block,则里面的容器的内容不会居中。

2)、text-align具有向下传递性,会不断地向子元素传递。如果设置一个div,则其子div中的内容也会居中。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>css 水平居中</title>

<style>

.box {

width: 400px;

height: 100px;

background: pink;

text-align:center;

}

</style>

</head>

<body>

<div class="box">css 水平居中了--文本文字</div>

</body>

</html>

效果图:

4d43a4668d2c58a6c76b38666b1f623.png

  • 使用line-height属性来使单行文字垂直居中

line-height 属性设置行间的距离(行高)。不允许使用负值。

阅读剩余部分

相关阅读 >>

css如何设置图片不重复拉伸

css列表怎么横着排列

css grid布局是什么?grid布局的基本介绍

css input样式怎么修改

css如何让头像自动旋转

css3如何实现关闭按钮

css grid布局和flex布局是什么?

css中box是什么文件

css如何实现按钮透明

css transform-style属性怎么用

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...