CSS实现未知高度图文混合垂直居中

2016-02-19 20:21 10 1 收藏

想不想get新技能酷炫一下，今天图老师小编就跟大家分享个简单的CSS实现未知高度图文混合垂直居中教程，一起来看看吧！超容易上手~

【 tulaoshi.com - Web开发】

CSS* { margin:0; padding:0; list-style:none; } #vertical_box { width:100%; display:table; border:1px red solid; height:400px; /*针对IE的hack*/ *position:relative; } #vertical_box_sub { display: table-cell; vertical-align: middle; /*针对IE的hack*/ *position:absolute; *top:50%; } #vertical_box_container { font-family:"宋体"; border:1px green solid;/*针对IE的hack*/ *position:relative; *top:-50%; margin:0 auto; width:200px; }

HTML
div id="vertical_box"
div id="vertical_box_sub"
div id="vertical_box_container"
p我是居中的文字/p
p我居中/p
p你也居中/p
img src="http://www.adobetutorialz.com/Advertising/W3Markup.jpg" border=0 alt="" title=""
/div
/div/div

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

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

上一篇： C/C++编程新手错误语录(续二)
下一篇：听一半的曲唱一半的歌

看过《CSS实现未知高度图文混合垂直居中》的人还看了以下文章更多>>

css教程:DIV垂直居中的办法

标签： Web开发

经过今天一翻改进，终于找出了解决DIV垂直居中的办法。 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head meta http-equiv="Content-Type" content="text/ht...

DIV实现垂直居中对齐的方法

标签： Web开发

尽管有CSS的vertical-align特性，但是并不能有效解决未知高度的垂直居中问题(在一个DIV标签里有未知高度的文本或图片的情况下)。标准浏览器如Mozilla, Opera, Safari等.，可将父级元素显示方式设定为TABLE(display: table;) ，内部子元素定为table-cell (display: table-cell),通过vertical-align特性使其垂直居中，但非标准浏览器是不支持...

CSS垂直居中网页布局实现的5种方法

标签： Web开发

利用 CSS 来实现对象的垂直居中有许多不同的方法，比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。下面我们看一下使对象垂直集中的5种不同方法，以及它们各自的优缺点。(可以看看测试页面，有简短解释。) 方法一这个...

CSS教程：在网页布局中简单实现垂直居中的办法

标签： Html CSS布局 Div+CSS XHTML

英文原文： http://www.search-this.com/2008/05/15/easy-vertical-centering-with-css/ 中文译文： http://www.12sui.cn/blog/71.html 本人英语还没过四级，所以不能说是翻译把，只能说是按照自己的理解去叙述了一遍作者的意思，请各位多多指教。译文内容：当你发觉你曾经以为的事实其实并不是那样，你会感觉很开心。旧的方法经...

CSS教程：网页图片垂直居中的使用技巧

标签： Web开发

在曾经的淘宝UED 招聘中有这样一道题目：使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。当然出题并不是随意，而是有其现实的原因，垂直居中是淘宝工作中最常遇到的一个问题，很有代表性。题目的难点在于两点：垂直居中；图片是个置换元素，有些特殊的特性。至于如何解决，下面是一个权衡...

查看更多精彩>>