冷门布局方法-tabel-cell-的可行性研究.docxVIP

冷门布局方法tabel-cell的可行性研究

display:table-cell属性简介display：table-cell；会使元素表现的类似一个表格中的单元格td,利用这个特性可以实现文字的垂直居中效果。同时它也会破坏一些CSS属性，使用table-cell时最好不要与float以及position:absolute一起使用，设置了table-cell的元素对高度和宽度高度敏感,对margin值无反响，可以响应padding的设置，表现几乎类似一个td元素。

小结：

不要与float：left;position:absolute;一起使用。

可以实现大小不固定元素的垂直居中。

margin设置无效，响应padding设置。

对高度和宽度高度敏感。

不要对display：table-cell使用百分比设置宽度和高度。

下面介绍几个table-cell的应用：

1.局度不定内容水平垂直居中

1.

局度不

定内容水平垂直居中

文字水平垂直居中：

style

.table-wrap(display:table-cell;

height:200px;width:100px;

padding:20px;vertical-align:middle;

text-align:center;border:lpxsolidred;)

/style

divclass=table-wrap我是一大推文字，我想要垂直居中，这是省略这是省略这是省略这是省略

/div

关键在于设置了display:cell;后,vertical-align:middle使文字内容垂直居中。

图片水平垂直居中：

style

.outer{display:table;width:100%;}

.table-wrap{display:table-cell;

height:200px;padding:20px;

vertical-align:middle;text-align:center;

border:lpxsolidred;}

/style

divclass=outerdivclass=table-wrap

imgsrc=://jsfiddle.net/img/logo(a)2x.pngalt=logo//div

/div

中间的图片会随着外层容器的大小而自动水平垂直居中，其实原理和文字水平垂直居中一模一样。

.多列布局实现文字水平方向对齐

style

*{margin:0;padding:0;}.outer{display:table;width:90%;margin:10pxauto;padding:10px;border:lpxsolidgreen;}

.table-left,.table-right{display:table-cell;width:20%;border:lpxsolidred;

)

.table-center{height:100px;

background-color:green;

)/style

divclass=outer

divclass=table-leftp我是左边々

/div

divclass=table-center我是中间

/div

divclass=table-rightp我是右边々

/div/div

可以看到左右两边以及中间局部的文字，虽然它们在不同的容器中，且不用管当前列容器设置的padding是多少，它们在水平方向上是绝对对齐的。

.等局?布局style

*{margin:0;padding:0;}.outer{display:table;width:90%;margin:10pxauto;padding:10px;border:lpxsolidgreen;}

.table-left{display:table-cell;width:150px;padding-top:20px;border:lpxsolidred;vertical-align:top;text-align:center;)

.table-right{border:lpxsolidyellow;background-color:green;margin-left:20px;padding:10px;

/style

divclass=outerdivclass=table-left

imgsrc=alt=logo//div

divclass=Htable-right

span这是很多文字这是很多