IMG垂直居中问题

2011-02-22 10:51:00|  分类： CSS |  标签：垂直居中  div  align  img  vertical  |举报|字号 订阅

 

//dt 中 img 垂直居中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<style type="text/css">
div {
 display:table-cell;
 height:300px;
 width:500px;
 text-align:center;
 border:1px solid #000;
 vertical-align:middle
 }
</style>
<!--[if IE]>
<style type="text/css">
i {
 display:inline-block;
 height:100%;
 vertical-align:middle
 }
img {
 vertical-align:middle
 }
</style>
<![endif]-->
<div>
<i></i>
 <img src="http://www.baidu.com/img/logo.gif" alt=""/>
</div>

//div 中 img 垂直居中

<!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>无标题文档</title> 
<style type="text/css"> 
.psdthumb { height: 1%; overflow: hidden; display:table; border-spacing:10px; } 
.psdthumb li {border:1px solid #aaa; width:240px; height:160px; text-align:center; vertical-align:middle; position:relative; margin: 10px; *float:left; display: table-cell; } 
.psdthumb .qq { *position:absolute; top:50%; } 
.psdthumb .qq img { *position:relative; top:-50%; left:-50%; } 
</style> 
</head>

<body> 
<div class="psdthumb">
<li><div class="qq"><img src="wmlogo.gif" ></div></li> 
<li><div class="qq"><img src="logo_w.gif" ></div></li> 
</div> 
</body> 
</html>

纯CSS实现未知尺寸的图片水平和垂直居中
.box {
        /*非IE的主流浏览器识别的垂直居中的方法*/
        display: table-cell;
        vertical-align:middle;

/*设置水平居中*/
        text-align:center;

/* 针对IE的Hack */
        *display: block;
        *font-size:262px;/*约为高度的0.873，300*0.873 约为262*/
        *font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/

width:400px;
        height:300px;
        border:1px solid #eee;
}
.box img {
        /*设置图片垂直居中*/
        vertical-align:middle;
}

<div class="box">
 <img src="http://www.rainweb.cn/rainweb-blue.png"/>
</div>

Img垂直居中的更多相关文章

  1. CSS垂直居中的11种实现方式

    今天是邓呆呆球衣退役的日子,在这个颇具纪念意义的日子里我写下自己的第一篇博客,还望前辈们多多提携,多多指教! 接下来,就进入正文,来说说关于垂直居中的事.(以下这11种垂直居中的实现方式均为笔者在日常 ...

  2. css元素水平居中和垂直居中的方式

    关于居中的问题,一直处于疑惑不解的状态,知道的几种方法好像也不是每一次都会起到作用,所以更加迷惑.主要是不清楚该 在什么情况下采用哪种解决方法,所以,整理了一些方法,梳理一下思路,做一个总结. 1. ...

  3. [css]实现垂直居中水平居中的几种方式

    转自博客 http://blog.csdn.net/freshlover/article/details/11579669 居中方式: 一.容器内(Within Container) 内容块的父容器设 ...

  4. css样式让input垂直居中

    css样式让input垂直居中 css代码: .div1{ border: 1px solid #CCC; width:1120px; height:40px; margin:auto; displa ...

  5. CSS垂直居中总结

    工作中遇到垂直居中问题,特此总结了一下几种方式与大家分享.本文讨论的垂直居中仅支持IE8+ 1.使用绝对定位垂直居中 <div class="container"> & ...

  6. CSS实现水平|垂直居中漫谈

    利用CSS进行元素的水平居中,比较简单,手到擒来:行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可.而撸起垂直居中, ...

  7. CSS3与页面布局学习总结（三）——BFC、定位、浮动、7种垂直居中方法

    一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格 ...

  8. CSS教程:div垂直居中的N种方法以及多行文本垂直居中的方法

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  9. IE6+未知尺寸元素水平垂直居中

    首先讨论在IE8以上(也就是支持伪元素after的基础上)的2种情况 当有一段不知道长度大小的文字在你面前,你需要使它垂直居中的时候,你肯定会想到:1.text-align:center;水平居中没错 ...

  10. html文本垂直居中对齐

    html文本垂直居中对齐,代码如下: <div id="box" style="height:100px; line-height:100px; border:1p ...

随机推荐

  1. Umbraco安装权限问题

    当安装或升级,甚至是使用Umbraco时,如果出现一些莫名其妙的问题. 估计都是权限出了问题,用心参考下文: https://our.umbraco.org/documentation/Getting ...

  2. 【Win7激活工具2013版下载】适用于旗舰版、家庭高级版等所有版本32/64位 OEM激活

    虽然现在Win8已经发布了,但是身边总是还有一些朋友在用着Win7系统,而近期微软频繁的推送补丁包,导致之前的那些激活都失效了.找了网络上很多工具,之前的那些有的已经不能用了,激活不了,今天就推荐一些 ...

  3. 占成本85% SSD深度选购教你如何看颗粒

    颗粒是固态硬盘负责容量和传输的介质,在这一方面上与优盘产品是相同的,从外观上看,颗粒占据了整个固态硬盘内部70%左右的空间,其同样做为成本技术,根据厂商的用料不同,成为了固态硬盘内部核心材料. 颗粒的 ...

  4. C语言入门（14）——结构体

    整数.字符.布尔值.浮点数这些数据类型都具有单一的值,这些可称为基本数据类型.但字符串是一个例外,它由很多字符组成,像这种由基本类型组成的数据类型称为复合数据类型,正如表达式和语句有组合规则一样,由基 ...

  5. NOI2012 Day2

    NOI2012 Day2 迷失游乐园 题目描述:给出一个\(n\)个点的图,边数为\(n-1\)或\(n\).从某个点出发,每次等概率地随机选一个相连的并且没有经过过的点,直到不能走为止,问期望路径长 ...

  6. HDU 4661 Message Passing 【Tree】

    题意: 给一棵树,每一个结点都有一个信息,每一个时刻,某一对相邻的结点之间可以传递信息,那么存在一个最少的时间,使得所有的节点都可以拥有所有的信息.但是,题目不是求最短时间,而是求最短时间的情况下,有 ...

  7. windows 7 memcached报failed to install service or service already installed的解决方案

    今天心血来潮捣鼓一下memcache,由于系统是windows 7,我参考了 Windows下安装Memcache 使用memcached for Win32. 在运行memcached.exe -d ...

  8. GDI+ 填充背景时，非常多时候不起作用，GDI、GDI+配合运用

    在ONDRAW中运行GDI+ 填充背景时,不起作用,不知道什么原因 [cpp] view plaincopy Graphics graphics(pDC->GetSafeHdc()); Bitm ...

  9. oracle 11g导入导出

    数据的导入 1 将D:\daochu.dmp 中的数据导入 TEST数据库中.   imp system/manager@TEST  file=d:\daochu.dmp    上面可能有点问题,因为 ...

  10. Web定时执行某个方法-网页获取

    实现该功能用到的是System.Timers.Timer 将定时的方法添加到Global.ascx.cs中 public class Global : System.Web.HttpApplicati ...