css：table-cell的妙用

css：table-cell的妙用

一、垂直居中

    <div>
        <img src="timg.jpg"/>
    </div>

        div{
            width:200px;
            height:200px;
            display:table-cell;
            vertical-align:middle;
            text-align: center;
            border:1px solid silver;
        }

效果图：

二、自动平均划分元素

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

     /*
        当父元素定义“display:table”而子元素定义“display:table-cell”时，如果给父元素
一定的宽度，父元素宽度就会根据子元素的个数进行自动平均划分。
     */
        *{
            padding:0;
            margin:0;
        }
        ul{
            list-style-type: none;
            display:table;/*注意是table,不是table-row*/
            width:300px;
        }
        li{
           display:table-cell;
           height:30px;
           line-height:30px;
           text-align:center;/*使文本水平垂直居中*/
           color:white;
        }
        ul li:nth-child(1){
            background:red;
        }
        ul li:nth-child(2){
            background:orange;
        }
        ul li:nth-child(3){
            background:blue;
        }
        ul li:nth-child(4){
            background:green;
        }
        ul li:nth-child(5){
            background:purple;
        }

效果图：

三、自适应等高布局

example1:图片和文字自适应等高布局

    <div id="wrapper">
        <div id="img-box">
            <img src="book.jpg"/>
        </div>
        <div id="text-box">
            <p>《偷书贼》是澳大利亚知名作家马库斯•苏萨克的长篇小说代表作，它像《解忧杂货店》和《追风筝的人》一样，可以战胜孤独和恐惧，拯救身陷绝望的人，遇到这些书，是我们这一代人的幸运。</p>
            <p>二战期间，九岁的德国姑娘莉泽尔和弟弟被送往寄养家庭。弟弟不幸病死在火车上。在埋葬弟弟的荒原上，莉泽尔捡到了一本对她意义非凡的书《掘墓人手册》。</p>
            <p>来到慕尼黑贫民区的寄养家庭，莉泽尔夜夜抱着《掘墓人手册》入睡。养父为安慰她，每晚给她朗读手册的内容，还教她阅读。</p>
            <p>莉泽尔发现书的诱惑比食物更难抗拒，忍不住开始偷书。书里的世界帮助她熬过了现实的苦难，她也开始为藏在地下室的犹太人和在防空洞避难的邻居读书，安慰那一颗颗惶惶不安的心。然而，无情的战火终于摧毁了这一切……</p>
        </div>
    </div>

        #wrapper{
            display:table-row;
        }
        #img-box{
            display:table-cell;
            border:1px solid silver;
            vertical-align: middle;
            text-align:center;
            width:200px;
        }
        #img-box img{
            width:100px;
        }
        #text-box{
            display:table-cell;
            width:500px;
            border:1px solid silver;
        }
        #text-box p{
            text-indent:2em;
        }

效果图：

ps:左右两个盒子我们都没有加上高度，而是由盒子内容撑开。因为同一行的单元格 td 元素高度是相等的，所以左右两个盒子高度相等，并且高度由两者高度最大值决定。这就是自 适应的等高布局。

example2:图片链接与文字的对齐

当在<a></a>标签中加入<img>标签时，可以实现点击图片进入某个链接，对用户十分友好，但由于<a></a>标签本身和图片大小不一致，因此想要在图片附近加入相应的文字对齐居中，常常达不到想要的效果。如:

    <a href="#">
        <img src="book.jpg"/>
    </a>
    <span>作者： [澳]马库斯·苏萨克</span>

    img{
        height:100px;
    }
    a{
           vertical-align: middle;
    }

我们希望文字在图片右边中部,用vertical-align:middle没能达到我们想要的效果。这时，我们可以使用table-cell。

    <div id="wrapper">
        <a id="link" href="https://book.douban.com/subject/30225784/?icn=index-editionrecommend">
            <img src="book.jpg" id="img-link"/>
        </a>
        <div id="link-txt">
          作者： [澳]马库斯·苏萨克
        </div>
    </div>

        #img-link{
            width:100px;
        }
        #wrapper{
            display:table-row;
        }
        #link{
            display:table-cell;
            text-align:center;
            vertical-align: middle;
        }
        #link-txt{
            display:table-cell;
            vertical-align: middle;
            padding-left:20px;
            font-size:0.8em;
        }

效果图：

example3:动态评论的两栏布局

    <div id="wrapper">
        <div id="master-img">
            <img src="timg2.jpg" class="head-portrait"/>
        </div>
        <div id="master-content">
            <p id="author">
                <span class="light-txt">孤独的根号三</span>
            </p>
            <p id="sentence">
                如果下一秒的我已经不是上一秒的我，那么我......还是我吗？
            </p>
            <p id="info">
                评论(2)-转载-赞-浏览-<span class="light-txt">5月9日12:13</span>
            </p>
            <div class="observer-wrapper">
                <div class="observer-img">
                    <img src="timg3.jpg"  class="head-portrait"/>
                </div>
                <div class="observer-text">
                    <p><span class="light-txt">binbing:</span><span>那我还是你爸爸吗</span></p>
                    <p><span class="light-txt">5月9日12:20</span></p>
                </div>
            </div>
            <div class="observer-wrapper">
                <div class="observer-img">
                    <img src="timg4.jpg"  class="head-portrait"/>
                </div>
                <div class="observer-text">
                    <p><span class="light-txt">大人：</span><span>你还是我儿子 这个不会变</span></p>
                    <p><span class="light-txt">5月9日13:20</span></p>
                </div>
            </div>
        </div>
    </div>

        *{
            padding:0;
            margin:0;
        }
        .head-portrait{
            width:40px;
            height:40px;
            border-radius:20px;
        }
        #wrapper{
            display:table-row;
        }
        #master-img{
            display:table-cell;
            text-align:center;
            vertical-align: top;
            padding-right:10px;
        }
        #master-content{
            display:table-cell;
            vertical-align: top;
            
        }
        #author{
            padding-bottom:10px;
        }
        #sentence{
            padding-bottom:10px;
        }
        #info{
            padding-bottom:20px;
        }
        .light-txt{
            color:slategray;
        }
        .observer-wrapper{
            display:table-row;
        }
        .observer-img{
            display:table-cell;
            text-align:center;
            vertical-align: top;
            padding-right:10px;
            padding-bottom:10px;
        }
        .observer-text{
            display:table-cell;
            vertical-align: top;
            padding-bottom:10px;
        }

效果截图：

四、总结：

table-cell的妙用：

	1.垂直居中
	
	2.自适应等高布局
	
	3.自动平均划分元素