css怎么让文字居中

PHP中文网 JavaScript 百度已收录

当前第2页 返回上一页

该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。

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: 300px;

height: 300px;

background: paleturquoise;

line-height:300px;

}

</style>

</head>

<body>

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

</body>

</html>

效果图：

6c33f140b5c34e7d247f0e1af417cbb.png

  • 使用vertical-align:middle +display:table-cell使多行文字垂直居中

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>css 垂直居中</title>

<style>

.box {

width: 300px;

height: 300px;

background: paleturquoise;

vertical-align:middle;

display:table-cell;

}

</style>

</head>

<body>

<div class="box">css 垂直居中了--文本文字,文本文字,文本文字,文本文字,文本文字,文本文字。</div>

</body>

</html>

效果图：

490008ec14881ebdc167d0e47589668.png

说明：vertical-align:middle +display:table-cell能够使单行文字、多行文字都居中。但是因为 table-cell 是 inline 类型，所以会导致原来的块级元素每个 div 一行移动到了同一行。如果需要分列两行，需要在外面额外添加容器对位置进行控制。

【推荐学习：css视频教程】

以上就是css怎么让文字居中的详细内容，更多文章请关注木庄网络博客！

返回前面的内容

相关阅读 >>

css圆角属性是什么

在css中怎样添加脚注

jsp与css的区别是什么

html img图片怎么设置透明度

什么是css盒子模型？

css text-decoration-style属性怎么用

css 预处理器

css怎么样清除浮动

css sprite是什么

css怎么给图片添加两个边框

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




标签：

打赏

取消

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

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

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

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

相关推荐

评论

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