display: table-cell的实用应用

概述

之前工作中碰到了一个垂直居中问题，最后通过查资料利用table-cell解决。于是打算总结一下有关table-cell的应用，记录下来，供以后开发时参考，相信对其他人也有用。

一行或多行文字垂直居中

比如有这样一个需求：框内的文字水平居中，垂直居中，并且当文字很多时，自动变成多行，并且变成多行后仍然是水平居中，垂直居中的。

一般情况下，我们可以用以下代码来实现：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

div {

  display: table-cell;

  width: 200px;

  height: 100px;

  font-size: 30px;

  border:4px solid #beceeb;

  text-align: center;

  vertical-align: middle;

}

span {

  display: inline-block;

  vertical-align: middle;

}

</style>

</head>

<body>

  <div>

    <span>我的字很少</span>

  </div>

  <div>

    <span>我是很多行很多字</span>

  </div>

</body>

</html>

但是如果我们需要父容器是块级元素，或者父容器浮动，那么用上面的办法就不行了，这个时候可以用display: table来实现，比如下面的代码：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

div {

  display: table;

  width: 200px;

  height: 100px;

  font-size: 30px;

  border:4px solid #beceeb;

  text-align: center;

  vertical-align: middle;

  float: left;

}

span {

  display: table-cell;

  vertical-align: middle;

}

</style>

</head>

<body>

  <div>

    <span>我的字很少</span>

  </div>

  <div>

    <span>我是很多行很多字</span>

  </div>

</body>

</html>

另外需要注意的是，如果里面的文字是一串很长的单词，那么有可能会超出父容器的宽度，这个时候需要添加word-break: break-all;来实现了。

左边宽度固定，右边宽度自适应

有这样一个需求：父元素宽度不定，它有2个子元素，子元素在同一行，左边的子元素宽度固定，右边的子元素宽度自适应。

这里左边的子元素肯定会用浮动，如果右边的元素设置display: block;的话，右边的子元素会包括左边的子元素。但是如果设置display: table-cell的话，就不会了，如下面的代码所示：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

.box{width:60%; margin:60px auto 0; padding:20px; background:#f5f5f5;overflow: hidden;}

.girl-img {float:left; width: 100px;}

.content{display: table-cell;}

</style>

</head>

<body>

<div class="box f9 fix">

    <a href="#prettyGirl" class="girl-img"><img border="0" src="https://image.zhangxinxu.com/image/study/s/s128/mm2.jpg" /></a>

    <div class="content">

        <p><a href="#prettyGirl">大美女一枚</a> 来自上海</p>

        <p class="mt5">签名：想找个保鲜盒把你给我的那些感动都装起来。当你让我伤心的时候就拿出来回味一下。</p>

        <p class="mt5">微博：坐在办公室，只听轰隆隆几声巨响，晴天也能打雷吗？原来街对面的芭莎咖啡厅被炸成了两截。这定点爆破也太失败了，也不清下场，把路过的汽车震得灰头土脸，愣在路中央不知如何是好。其次，房子只炸了一半，另一半屹立不倒，是乍药太水还是房子质量太好？</p>

    </div>

</div>

</body>

</html>

值得一提的是，bootstrap里面的输入框组input-group就用到了这种布局。

其它

table-cell还可以实现很多其它布局，但是那些布局不用table-cell一样也可以实现，所以我这里就不一一列出来了。