繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 文字或图片元素在DIV中垂直居中
- CSS样式表
- Webjx收集基于CSS+JS设计50款优秀的导航菜单
- 初学者简单学习CSS网页布局
- CSS教程：一张图片实现圆角
- 基于CSS的网站导航菜单
- CSS新特性:圆角边框多栏Gird布局背景设置
- CSS实例教程:制作网页特殊产品列表
- 收集国外网站的25个CSS高级教程
- CSS教程:制作圆角矩形的网站头像
- 网页推荐值得一看的CSS框架
- 有趣图例:你是一个网页设计师吗?
- 安装Firefox的Jetpack扩展的步骤
- CSS教程:CSS制作3D立方体
- Css教程:FireFox正常IE错位的绝对定位元素
- CSS对IE6、IE7、IE8支持详细的易用的参考
- CSS Sprites简介以及优缺点
- CSS教程:避免使用滤镜
- DIV+CSS佈局代码精简对SEO的影响
- 学习CSS需要知道的CSS基础知识
- CSS教程:clip属性全知道
- 基于firebug的firefox扩展:css usage
CSS样式表 中的 文字或图片元素在DIV中垂直居中
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 158 ::
收藏到网摘: n/a
复制代码 代码如下:
<!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/html; charset=GB2312" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.frame{
float:left;
margin:2px;
}
.outer {
height: 250px;
width: 240px;
overflow: hidden;
background:gold;
position: static !important;
position: relative;
display: table !important;
}
#middle { /* for explorer only*/
position: absolute;
top: 50%;
}
#middle[id] {
display: table-cell;
vertical-align: middle;
position: static;
}
#inner { /* for explorer only */
position: relative;
top: -50%;
width: 100%;
margin: 0 auto;
text-align:center
}
</style>
</head>
<body>
<div class="frame">
<div class="outer">
<div id="middle">
<div id="inner"><img src="http://bbs.blueidea.com/images/smilies/eek.gif" alt="" /></div>
</div>
</div>
</div>
<div class="frame">
<div class="outer">
<div id="middle">
<div id="inner">
<img src="http://bbs.blueidea.com/images/smilies/eek.gif" alt="" /><br /><br />
<img src="http://bbs.blueidea.com/images/smilies/eek.gif" alt="" />
</div>
</div>
</div>
</div>
<div class="frame">
<div class="outer">
<div id="middle">
<div id="inner">图片与文本内容混合<br><img src="http://desk.blueidea.com/QTZY/GIF/xsgs_21/xsgs_21004.gif" alt="" /><br>图片与文本内容混合</div>
</div>
</div>
</div>
<div class="frame">
<div class="outer">
<div id="middle">
<div id="inner"><span>图片与文本</span><img src="http://desk.blueidea.com/QTZY/GIF/xsgs_21/xsgs_21004.gif" alt="" align="middle" /><span>图片与文本</span></div>
</div>
</div>
</div>
<div class="frame">
<div class="outer">
<div id="middle">
<div id="inner">5454545445445<br>5454545445445<br>5454545445445<br>5454545445445<br>5454545445445<br>5454545445445<br>5454545445445<br>5454545445445<br></div>
</div>
</div>
</div>
</body>
</html>
评论 (0) All
