做前端开发的同学肯定对文本居中不陌生,但一般我们说的都是水平居中也就是左右居中,那么你想过没有如何实现垂直居中也就是上下居中吗?今天小千就来给大家介绍一下。
单行文字垂直居中—行高等于高度值
上面的方法只适用于单行文本,多行文本使用就会出现问题,那么如何实现多行文本垂直居中呢?
多行文本垂直居中
1、模拟表格
将父元素div 模拟成表格table,子元素span模拟成表格单元格;让子元素设置vertical-align:middle来实现。
2、模拟表格单元格
3、将子元素设置为行内块元素,模拟成单行文字
将子元素设置为行内块元素,并且设置vertical-align:middle来实现,需要注意的是,子元素span会继承父元素div的行高,所以我们需要重设一个适宜的行高。
缺点:span文本的高度不能超过父元素div的高度。