首页 > 开发 > CSS > 正文

大小不固定的图片和多行文字的垂直水平居中实现分析

2024-07-11 08:48:48

字体：大中小

来源：转载

供稿：网友

一、大小不固定，多行文字的垂直居中

① 单行文字

可能很多人都知道如何让单行文字垂直居中显示，就是使用line-height，将line-height值与外部标签盒子的高度值设置成一致就可以了。例如：单行文字居中显示测试，css样式为：

height:3em; line-height:3em;……

② 多行文字

但是对于外框高度固定，文字大小个数不固定的多行文字呢？
文字可能一行显示，也有可能多行显示；文字可能是小号字体，也有可能是大号的。这时候如何让其垂直居中显示呢？看下面！这里的文字用来做多行文字垂直居中对齐的测试。
这是第二行文字，您还可以再添加一行文字做测试！
这是隐藏的第三行文字，注意到文字的变化没，依旧垂直居中。

上面所展示的就是多行文字垂直居中的效果！

HTML结构如下：

复制代码

上一篇：大小不固定的图片、多行文字的水平垂直居中实现方法

下一篇：display:table-cell实现兼容性的两栏自适应布局实现代码

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注

新闻热点

最牛同桌！我考了696分我同桌考了703分

2024-06-26 22:28:41

650分！高二女生考入北大：遗憾不能上高三

2024-06-26 22:26:16

男生估分600只考了397 妈妈：高考虽重要，但不代表所有

2024-06-26 22:23:01

唐尚珺回应是否会直播带货：有人出100万想和他合作！

2024-06-25 19:29:23

名校抢人名场面：清华、北大太拼了！

2024-06-25 19:22:14

男生高考语文满分！网友：第一次听说

2024-06-25 19:19:15

疑难解答

图片精选

网友关注