CSS实现DIV内容垂直及水平居中

2016-02-19 17:46 3 1 收藏

想要天天向上,就要懂得享受学习。图老师为大家推荐CSS实现DIV内容垂直及水平居中,精彩的内容需要你们用心的阅读。还在等什么快点来看看吧!

【 tulaoshi.com - Web开发 】

因为垂直居中的主要问题出在IE系列上,因此用到了IE的条件注释、IE8的兼容视图,还算完美解决了目前所有的主流浏览器的CSS实现DIV内容垂直及水平居中问题,IE5.5,IE6,IE7,IE8,Firefox,Chrome,Safari,Opera 测试通过,逸品天空Web开发代码站 http://code.dlstu.cn/。

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

核心代码:

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

 程序代码
meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /
style type="text/css"
#container {width:750px; height:600px; background:#f8f8f8; border:5px solid #777; text-align:center; display:table-cell; vertical-align:middle;}
/style
!--[if IE]
style type="text/css"
#fixie{width:0;height:100%;display:inline-block;vertical-align:middle;}
#fixiecontainer {text-align:center; width:100%; display:inline-block; vertical-align:middle;}
/style
![endif]--

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

延伸阅读
做为一个前端设计人员,对于产品展示页面的设计一定不会陌生,其中产品图片摆放是必定经历的一步,并且水平居中和垂直居中又是最多的。有时需要产品图片水平垂直居中显示,这种展示用CSS来实现又是比较棘手的一件事,我想很多前端攻程师都有研究过或者说是搜索过这些方法吧。很多网站都是使用table来实现产品图片垂直居中,实现也是相当的方便...
标签: Web开发
利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。 使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。下面我们看一下使对象垂直集中的5种不同方法,以及它们各自的优缺点。(可以看看 测试页面 ,有简短解释。) 图1 ...
标签: Web开发
在Web标准中的页面布局是使用Div配合CSS来实现的。这其中最常用到的就是使整个页面水平居中的效果,这是在页面布局中基本,也是最应该首先掌握的知识。不过,还是经常会有人问到这个问题,在这里我简单总结一下使用Div和CSS实现页面水平居中的方法: 一、margin:auto 0 与 text-aligh:center     在现代浏览器(如Internet E...
标签: Web开发
    使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。下面我们看一下使对象垂直集中的3种不同方法,以及它们各自的优缺点 方法一: 这个方法把一些 div 的显示方式设置为表格,因此我们可以使用表格的 vertical-align property 属性。 div id="wrapper" div id="cell" div class="content...
标签: Web开发
用Table布局可以很容易的实现文字和图片的垂直居中,但是在div的布局中呢,要实现定高容器里面的内容的垂直居中不是太简单的事情。 在DOM标准中 在IE中 综合 #boxOuter {     display:table;     height:300px;     width:500px;     border:solid 1px black;   &n...

经验教程

739

收藏

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