display:table和display:table-cell的妙用

云模板

在一些应用中,比如要使文本垂直居中,可以用绝对定位来弄,但有时在左右二栏的结构时,定位就不好操作了,用table与table-cell就简单好多。如下图,左右二栏是各占50%的,要使左右的内容都垂直居中,不会因为左边的文字过多把高扩大导致右边的图片一直在顶部,就不美观了。

HTML结构:

  1. <div class="parent">
  2.   <div class="son">
  3.   </div>
  4. </div>

CSS代码:

  1. .parent{
  2. display:table;
  3. height:100%;
  4. }
  5. .son{
  6. display:table-cell;
  7. vertical-align:middle
  8. }
本文原创,作者:CityMall,其版权均为创客云所有。如需转载,请注明出处:https://www.22vd.com/video/displaytable%e5%92%8cdisplaytable-cell%e7%9a%84%e5%a6%99%e7%94%a8
云模板

发表评论