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

（从已经死了一次又一次终于挂掉的百度空间人工抢救出来的，发表日期 2014-06-26）

CSS实现未知高度图文混合垂直居中,阅读CSS实现未知高度图文混合垂直居中。

IE6,IE7,FF3测试通过

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="" border=0 alt="\" title="">
</div>
</div></div>

时间： 2024-10-13 22:10:05

CSS实现未知高度图文混合垂直居中的相关文章

CSS解决未知高度垂直居中

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

未知高度的图片垂直居中

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>未知高度的图片垂直居中</title> 6 <meta name="author" content="http://www.cnblogs.com/leafsummer?qq=11580563"> 7 <style>

用CSS让未知高度内容垂直方向居中

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo</title> <style type="text/css"> #outer{ width:500px; height:200px; margin: 50px auto; border:1px solid #CCC; display:table; tex

巧用CSS居中未知高度的块元素

在网页中让一个未知高度的块元素水平垂直居中是一个老生常谈的问题,但是总是有些特殊场景让你无法得心应手的实现居中,本文介绍几种常用的经典的居中方法,总有一种适合你! 1. position .parent { width: 200px; height: 200px; margin: auto; border: 1px solid red; position: relative; } .child { position: absolute; width: 100px; height: 50%; to

css在未知高度的情况下实现垂直居中

.img{width:100px;height:110px;display:table-cell;text-align:center;vertical-align:middle;border:1px solid red;overflow:hidden;} "`

css实现固定高度及未知高度文字垂直居中的完美解决方案

在工作当中我们经常碰到类似于"固定高度文字垂直居中及未知高度垂直居中问题",或者 "图片垂直居中问题",而我们最容易会想到使用表格来垂直居中,或者如果是单行文字的话使用height(高度)和line-height(行高)来解决,但是假如页面有多行文字的话固定高度该怎么解决? 或者未知高度我们该用css怎么解决? 且兼容各个游览器! 一:单行文字垂直居中: 如果一个容器中只有一行文字的话,让他垂直居中比较简单直接定义height(高度)和 line-height(

div垂直居中的N种方法单行/多行文字(未知高度/固定高度)

说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的 CSSHack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,但是它只对(X)HTML元素中拥有 valign特性的元素才生效,例如表格元素中的<td>.<th>.<caption>等,而像<div>.<span>这样的元素是没有valign特性的,因此使用verti

CSS总结（六）——元素的垂直居中（已知高度/未知高度）

元素的垂直居中 1.已知高度宽度元素的水平垂直居中 ① 绝对定位居中 .center{ margin:auto; position:absolute; top:0; left:0; bottom:0; right:0; } ② 绝对定位与负边距实现 .center{ width:100px; height:100px; position:absolute; top:50%; left:50%; margin:-50px 0 0 -50px; } 2.未知高度宽度元素的水平垂直居中 ① 当元

关于未知高度的垂直居中

1.内容为纯文字的时候的垂直居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>未知高度垂直居中</title> <style type="text/css"> .box{width: 200px;height: 500px;background-color: yello