[转]div 让文字或图片居中
2024-10-12 13:27:42
本文转自：http://qsfwy.iteye.com/blog/250206
在div 中让 文字或图片居中,请参考以下代码1： - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>居中</title>
</head>
<style type="text/css">
.imageWrap{ width:200px; height:200px; text-align:center; border:#999 solid 1px; display:table-cell; vertical-align:middle; position:relative;}
.imageWrap .outer{ +position:absolute; +top:50%;+left:0}
.imageWrap .inner{ +position:relative; +top:-50%;+left:0}
.imageWrap img{ display:block; margin:0 auto}
</style>
<body>
<div class="imageWrap">
<div class="outer">
<div class="inner">
<img src="http://www.baidu.com/img/baidu.gif"/>
<a href="#">百度</a>
</div>
</div>
</div>
</body>
</html> 参考代码2： - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - <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>
最新文章
- 一些sql三
- django 快速实现完整登录系统（cookie）
- POJ 3320
- ?--Porg.springframework.beans.MethodInvocationException: Property 'username' threw exception; nested exception is java.lang.NullPointerException
- Static用法
- 2017-05-4-C语言学习笔记
- 【Redis使用系列】redis设置登陆密码
- CentOS7.4下的 JDK1.8 安装
- IntelliJ IDEA部署tomcat时Edit Configuration Deployment无artifact选项
- 冗余jar包识别神器 - loose.jar
- docker内存监控与压测
- javascript: checked 不可全选
- sqoop简单配置与使用
- django基础之一
- 使用Akka构建集群（一）
- verilog语法实例学习(5)
- oracle初始化化表空间用户权限
- CLR基础，CLR运行过程，使用dos命令创建、编译、运行C#文件，查看IL代码
- C#.NET常见问题(FAQ)-VS如何整个项目中查找字符串
- DecisionTree