display: table的使用

1、自动平均划分每个小模块，使其一行显示

        <div class="wrap">            <div class="content">                <ul>                    <li>1</li>                    <li>2</li>                    <li>3</li>                    <li>4</li>                    <li>5</li>                    <li>6</li>                </ul>            </div>        </div>

.wrap {        width: 800px;        margin: 50px auto 0px;    }    .content {        display: table;        width: 100%;        min-width: 320px;        max-width: 1000px;        padding: 15px 5px;        margin: 10px auto;        border: 1px solid #CCCCCC;    }    .content ul {        display: table;        width: 100%;        padding: 0;        border-right: 1px solid #FEB312;    }    .content ul li {        display: table-cell;        height: 100px;        line-height: 100px;        text-align: center;        border: 1px solid #FEB312;        border-right: none;    }

3、图片垂直居中与元素/使大小不固定的元素垂直居中

<div class="wrap">	<p>图片垂直居中与元素</p>	<div class="content">		<div class="img-box"><img width="100" src="img/p2.jpg"/></div>	</div></div>

.wrap{width: 80%;margin: 50px auto 0px;}			.content{				display: table;				width: 100%;				height: 300px;				min-width: 320px;				max-width: 1000px;				margin: 10px auto;				border: 1px solid #CCCCCC;			}			.img-box{				display: table-cell;				font-size: 0px;				border: 1px solid red;				vertical-align: middle;				text-align: center;				background: lightblue;			}