CSS的display:table-cell：多行文字的垂直居中水平居中

参考：https://blog.csdn.net/lishuai_it_trip/article/details/88411550?utm_medium=distribute.pc_relevant_t0.none-task-blog-searchFromBaidu-1.control&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-searchFromBaidu-1.control

问题：多行文本垂直居中存在问题

不可行方法：一般的思路就是高度等于行高，但是这个仅适用于单行文本，【第二行不行】

不可行方法：flex布局也只是对元素可以设置垂直居中，不作用于文本，所以是错误的。【对文字没有效果】

可行的方法：display:table和display:table-cell

给父元素<div>设置display:table，
子元素<p>设置display:table-cell，
再加上一个vertical-align:middle（默认情况下，图片，按钮，文字和单元格都可以用vertical-align属性），
于是单行多行的文本垂直居中问题就解决了，不论内容有多少，不论行高是多少，总之都会整体垂直居中

<!DOCTYPE html>
<html lang="cn">
<head><meta charset="UTF-8"><title>Title</title><style>div{display: table;border: 2px solid red;width: 500px;height: 200px;}p{display: table-cell;vertical-align: middle;}</style>
</head>
<body>
<div><p>hello world <br/>hello world <br/>hello world <br/>hello world</p>
</div>
</body>
</html>

其实这就相当于模拟了table的布局属性，display:table相当于<table>，display:table-cell就相当于<th><td>

我们不妨来看下<table>，<th>，<td>，在浏览器的默认属性：

th、td父元素是<tr>，<tr>也是从父元素继承，再往上则是tbody（table布局浏览器都会自动生成这个标签），

而tbody的默认vertical-align是middle（这个我在IE和Firefox都得到了认证），

所以当我们给其他标签加上display:table-cell时，并没有这个属性，

所以上文为了使文本垂直居中，需要我们手动加上vertical-align:middle。

CSS的display:table-cell：多行文字的垂直居中水平居中相关推荐

html表格图片垂直居中 css,利用Display: table;实现img图片垂直居中
html代码: CSS代码: .tablebox{width: 300px;height: 250px;bac公斤round: #fff;display: table} #imgbox{display ...
大小不固定的图片和多行文字的垂直水平居中
1. 单行文字可能很多人都知道如何让单行文字垂直居中显示,就是使用line-height,将line-height值与外部标签盒子的高度值设置成一致就可以了 2. 多行文字说白了就是把文字当图片处 ...
css 实现超出两行、多行文字省略号显示
在我们日常使用文字超出省略号显示,一般使用下面的方式实现,但是当有需求需要实现两行乃至多行时,该怎么实现呢. 单行省略: overflow: hidden; text-overflow: ellips ...
elemtnui 表格如何修改某行文字颜色（elemtnui table 修改某行文字颜色）
项目中用到了elementui的表格,需要根据不同状态显示不同颜色首先,我们在el-table标签中加入 :row-class-name="tableAddClass" ,双引号 ...
CSS：一行上不同大小的文字上下垂直居中对齐
关键代码 /* 每个子元素增加对齐属性 */.middle {vertical-align: middle; } 完整代码 <style>body {height: 100vh;displ ...
display:table和display:table-cell的妙用
display的table和table-cell一般情况下用的不多,所以很少有人去关注它,但他们两个联手起来会给你惊喜! 这里抛出这样一个问题,如下,让块里的多行文字垂直居中?一说到垂直居中就会想到, ...
大小不固定的图片、多行文字的水平垂直居中
想必写css的都知道如何让单行文字在高度固定的容器内垂直居中,但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢?本文将会告诉你如何实现多行文字的垂直居中显示. 关于图片垂直居中显示,想 ...
移动常见问题--H5标签之浏览器兼容性、JS之浏览器兼容性、CSS3之浏览器兼容性、移动端动画、click300ms延迟、单行和多行文字溢出省略、水平居中和垂直居中
1. H5标签之浏览器兼容性在移动端时可以放心的使用h5相关的标签但是如果需要兼容一些低版本的浏览器,例如IE6/7/8,此时可以到 [兼容] 下载一个 html5shiv.min.js 文件 ...
div内图片和文字水平垂直居中
大小不固定的图片.多行文字的水平垂直居中本文综述想必写css的都知道如何让单行文字在高度固定的容器内垂直居中,但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢?本文将会告诉你如何实 ...

CSS的display:table-cell：多行文字的垂直居中水平居中

CSS的display:table-cell：多行文字的垂直居中水平居中相关推荐

最新文章

热门文章