Display: table-cell实现img、文字垂直居中

时间 2019-11-19

标签 display table cell 实现 img 文字垂直居中栏目 CSS 繁體版

原文原文链接

在文章开头先说明一下此方法的兼容性，IE8+以及其余现代浏览器都支持此属性。css

直接献上一个demo吧html

<!DOCTYPE html>浏览器

<html>编码

<head>spa

<title>Table-cell Demo</title>图片

body {it

padding: 0;io

margin: 0;

}

h3 {

position: absolute;

z-index: 9;

top: 0;

right: 0;

margin: 0;

}

h5 {

position: absolute;

z-index: 8;

top: 230px;

right: 0;

margin: 0;

color: red;

}

.line {

position: absolute;

width: 100%;

height: 250px;

border-bottom: 1px solid red;

}

.box {

/*非IE的主流浏览器识别的垂直居中的方法*/

display: table-cell;

vertical-align: middle;

/*设置水平居中*/

text-align: center;

/* 针对IE的Hack */

*display: block;

/*约为高度的0.873，200*0.873 约为175*/

*font-size: 175px;

/*防止非utf-8引发的hack失效问题，如gbk编码*/

*font-family: Arial;

width: 500px;

height: 500px;

border: 1px solid #ccc;

}

.img1 {

width: 40px;

height: 40px;

/*设置图片垂直居中*/

vertical-align: middle;

}

.img2 {

width: 80px;

height: 80px;

/*设置图片垂直居中*/

vertical-align: middle;

}

.img3 {

width: 120px;

height: 120px;

/*设置图片垂直居中*/

vertical-align: middle;

}

</style>

</head>

<body>

<span>bpdqooo</span>

<span>bpdqooo</span>

</div>

<h3>table-cell实现垂直居中</h3>

</body>

</html>

如下是说明：

将class=”box”的div设为display: table-cell，便可实现div内元素的垂直居中

将个人demo用浏览器打开，能够看到我放了3张大小不一的图片，还有两段文字，咱们暂且把这些东西看做是一行

好，为何我要放三张图片呢？

如今咱们能够作个实验：

把最大的图片(class=”img3”)设为vertical-align: top

能够看到其余图片和文字均向上偏移，并且第二大的图片(class=”img2”)顶部和img3对齐，这说明，img3的vertical-align属性控制行内其余所占高度更小的元素，而且对img2做用最强

接着上一步，再来作个实验：

把img2设为vertical-align: top

能够看到img1和文字均向上偏移，并且img1顶部和img3对齐，这说明，img2的vertical-align属性控制行内其余所占高度更小的元素，而且对img1做用最强

你是否是彷佛明白了什么，同理，若把img设为vertical-align: top，那么两边的文字将会向上偏移，顶部与img1对齐。

结论：

table-cell内的元素，都可视为同一行中

若是只有单行，

该行的高度由最高的元素决定

若对行内某一元素进行设置vertical-align: top，则该属性影响其他高度更小的元素，且对高度最接近的元素做用最强（使之与其顶部对齐）

若是有多行，