CSS在固定不动宽高的div内完成竖直垂直居中的案

日期:2021-03-03 类型:科技新闻 

关键词:小程序开发者工具,小程序在线生成平台,小程序编辑,免费的小程序,微信小程序在哪里

要求实例

实例是这样的,1个外层div,高宽是固定不动的,可是里边內容并不是固定不动的。许多盆友的做法是头顶部加1个padding或margin,这样,里边內容显得貌似是垂直居中了,可是倘若內容转变,这样头顶部的固定不动padding或margin,自始至终不会改变。导致了竖直方位不容易垂直居中!

大家了解,倘若下面1个div

CSS Code拷贝內容到剪贴板
  1. <div class="outer"><div class="inner">haorooms內部內容</div></div>  

款式是这样的

CSS Code拷贝內容到剪贴板
  1. .outer{text-align:center;vertical-alignmiddle;width:200px;height:350px;}  

vertical-align:middle是无论用的,许多盆友就在.inner上面做文章内容了,和我上面说的,加margin这些!那针对这类状况,有木有更好的处理计划方案呢?

处理方式

思路:加1个cssHack,设定cssHack的line-height等于外层div的高宽比,便可以应用vertical-align:middle了!

div以下:

CSS Code拷贝內容到剪贴板
  1. <div class="outer">   
  2.     <div class="inner">haorooms內部內容</div><div class="v">cssHack</div>   
  3. </div>  

款式以下:

CSS Code拷贝內容到剪贴板
  1. * {   
  2.     margin: 0;   
  3.     padding: 0;   
  4. }   
  5. .outer {   
  6.     background-color#ccc;   
  7.     font-size24px;   
  8.     height350px;   
  9.     text-aligncenter;   
  10.     overflowhidden;   
  11.     width280px;   
  12. }   
  13. .outer  .inner,   
  14. .outer  .v {   
  15.     displayinline-block;   
  16.     zoom: 1;*displayinline/* 用于开启适用IE67 inline-block */  
  17. }   
  18. .outer  .inner {               
  19.     line-height: 1.8;   
  20.     padding: 0 4px 0 5px;   
  21.     vertical-alignmiddle;   
  22.     width262px;              
  23. }   
  24. .outer  .v {   
  25.     line-height350px;   
  26.     text-indent:-9999px;   
  27.     width1px;            
  28. }  

这样就完成了div內部的竖直垂直居中了!

上一篇:山查球生产制造生产厂家 返回下一篇:没有了