手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >CSS在固定宽高的div内实现垂直居中的实例详解
CSS在固定宽高的div内实现垂直居中的实例详解
摘要:需求案例案例是这样的,一个外层div,高宽是固定的,但是里面内容不是固定的。很多朋友的做法是头部加一个padding或者margin,这样,...

需求案例

案例是这样的,一个外层div,高宽是固定的,但是里面内容不是固定的。很多朋友的做法是头部加一个padding或者margin,这样,里面内容显得貌似是居中了,但是假如内容变化,这样头部的固定padding或者margin,始终不变。造成了垂直方向不会居中!

我们知道,假如下面一个div

CSS Code复制内容到剪贴板 <divclass="outer"><divclass="inner">haorooms内部内容</div></div>

样式是这样的

CSS Code复制内容到剪贴板 .outer{text-align:center;vertical-align:middle;width:200px;height:350px;}

vertical-align:middle是不管用的,很多朋友就在.inner上面做文章了,和我上面说的,加margin等等!那对于这种情况,有没有更好的解决方案呢?

解决方法

思路:加一个cssHack,设置cssHack的line-height等于外层div的高度,就可以使用vertical-align:middle了!

div如下:

CSS Code复制内容到剪贴板 <divclass="outer"> <divclass="inner">haorooms内部内容</div><divclass="v">cssHack</div> </div>

样式如下:

CSS Code复制内容到剪贴板 *{ margin:0; padding:0; } .outer{ background-color:#ccc; font-size:24px; height:350px; text-align:center; overflow:hidden; width:280px; } .outer.inner, .outer.v{ display:inline-block; zoom:1;*display:inline;/*用于触发支持IE67inline-block*/ } .outer.inner{ line-height:1.8; padding:04px05px; vertical-align:middle; width:262px; } .outer.v{ line-height:350px; text-indent:-9999px; width:1px; }

这样就实现了div内部的垂直居中了!

【CSS在固定宽高的div内实现垂直居中的实例详解】相关文章:

div使用margin:0px auto不居中的原因分析及解决

任意图片实现垂直居中的三种方法(兼容性还不错)

CSS定义标题的实例讲解

CSS图片垂直居中方法整理集合

CSS导航布局中当前页面的具体实现demo示例

css实现body背景图片水平垂直居中方法

css中水平垂直居中对齐布局实例总结

DIV+CSS 全屏垂直居中的一个办法

css实现图片在div中居中的效果

css控制div中元素居中的示例

精品推荐
分类导航