让单行文字垂直居中显示，就是使用line-height，将line-height值与外部标签盒子的高度值设置成一致就可以了。例如如下css代码：height:3em; line-height:3em;

 

但是，如何实现父容器高度固定，文字可能一行，两行或更多行的垂直居中对齐呢？
实现的关键是把文字当图片处理。用一个span标签将所有的文字封装起来，设置文字与图片相同的display属性（inline-block属性），然后用处理图片垂直居中的方式处理文字的垂直居中即可。
核心css代码如下，
外部div标签：

{display:table-cell; width:550px; height:1.14em; padding:0 0.1em; border:4px solid #beceeb; color:#069; font-size:10em; vertical-align:middle;}
内部span标签：

{display:inline-block;vertical-align:middle;font-size:0.1em; }

 

示例：

 

需要注意的问题：

1. 外部div 如果是在其它元素，如li 时，必须清除所有的浮动。

2. 必须设置font-size，否则在ie6下不生效。

 

附：

CSS的em、px、pt长度单位转换

在IE6.0字体设定为中的时候，如果字体未做任何CSS设定或者<font size>元素的设定，默认的字体是12pt，或者16px，或者1em，或者font size=3。em、px、pt的换算关系如下：

在线工具：http://www.auiou.com/relevant/00000430.jsp

 

参考：

张旭鑫 《大小不固定的图片和多行文字的垂直水平居中》

http://www.zhangxinxu.com/study/200908/img-text-vertical-align.html?jdfwkey=jhvtv1

1em=16px
1em=12pt

1px=1/16 em=0.0625em
1px=3/4 pt=0.75pt

1pt=1/12 em≈0.0833em
1pt=4/3 px≈1.3333px

 

# css
Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生