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，則該屬性影響其他高度更小的元素，且對高度最接近的元素做用最強（使之與其頂部對齊）

若是有多行，

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。