display: table-cell的实用应用
Posted yangzhou33
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了display: table-cell的实用应用相关的知识，希望对你有一定的参考价值。
概述
之前工作中碰到了一个垂直居中问题，最后通过查资料利用table-cell解决。于是打算总结一下有关table-cell的应用，记录下来，供以后开发时参考，相信对其他人也有用。
参考资料：我所知道的几种display: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一样也可以实现，所以我这里就不一一列出来了。
以上是关于display: table-cell的实用应用的主要内容，如果未能解决你的问题，请参考以下文章