CSS定高多行垂直居中

2016-02-19 20:22 4 1 收藏

今天给大家分享的是由图老师小编精心为您推荐的CSS定高多行垂直居中,喜欢的朋友可以分享一下,也算是给小编一份支持,大家都不容易啊!

【 tulaoshi.com - Web开发 】

用Table布局可以很容易的实现文字和图片的垂直居中,但是在div的布局中呢,要实现定高容器里面的内容的垂直居中不是太简单的事情。

在DOM标准中

在IE中

综合

#boxOuter
{
    display:table;
    height:300px;
    width:500px;
    border:solid 1px black;
    *position:relative;
}
#box
{
    display:table-cell;
    vertical-align:middle;
    *position:absolute;
    top:50%;
    width:100%;
}
#boxInner
{
    *position:relative;
    width:100%;
    top:-50%;
}
 

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

div id="boxOuter"
    div id="box"
        div id="boxInner"
            pSome Content Here/p
            pSome Content Here/p
            pSome Content Here/p
            pSome Content Here/p
            pSome Content Here/p
        /div
    /div
/div

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

资料引用:http://www.knowsky.com/441341.html

来源:http://www.tulaoshi.com/n/20160219/1623474.html

延伸阅读
标签: Web开发
    使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。下面我们看一下使对象垂直集中的3种不同方法,以及它们各自的优缺点 方法一: 这个方法把一些 div 的显示方式设置为表格,因此我们可以使用表格的 vertical-align property 属性。 div id="wrapper" div id="cell" div class="content...
标签: Web开发
在前面的文章中我简单总结了一个CSS在页面布局中实现div水平居中的方法,其实水平居中实现还是比较简单的,反而垂直居中有点麻烦,因为我们设计页面的时候往往水平宽度都是固定的。因此我们有必要总结一下在页面布局过程中实现垂直居中的方法。     在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置...
做为一个前端设计人员,对于产品展示页面的设计一定不会陌生,其中产品图片摆放是必定经历的一步,并且水平居中和垂直居中又是最多的。有时需要产品图片水平垂直居中显示,这种展示用CSS来实现又是比较棘手的一件事,我想很多前端攻程师都有研究过或者说是搜索过这些方法吧。很多网站都是使用table来实现产品图片垂直居中,实现也是相当的方便...
标签: Web开发
网页制作,用CSS实现图片垂直居中方法 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"style type="text/css"!--body {margin:0;padding:0}div {width:500px;height:500px;line-height:500px;border:1px solid #ccc;overflow:h...
标签: Web开发
原文连接: 图片自动等比例缩小,其实如果不考虑ie6的话,用css就可以实现,设定img的max-width和max-height,而img标签内不设定widht和height即可。  ie7已经支持max-width和max-height,这是为数不多的好消息之一。 但是对于ie6及以前的版本,就只能用js来设置了。  在 ff 2.0/ ie6 /&...

经验教程

312

收藏

69
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部