CSS图片垂直居中方法

让div里面的多行文本垂直居中的方法：

div{height:100px;width:100px;border:solid 1px red;text-align:center; display:table-cell;vertical-align:middle}

下面是网上好不容易找的多种办法：

看到问此问题的很多，所以花点时间整理下，欢迎大家提意见，做补充修改，谢谢！
/*lesliezmz整理的方法 2010-01-19*/
当writing-mode为tb-rl 时，文档流是从上到下，从右到左书写。然后设置text-align: center就可以实现垂直方向上的居中。算是一个小技巧吧。
原帖链接：IE6下用writing-mode实现未知高度替换元素垂直居中。

<!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>

<title>利用定位来显示垂直局中的图片</title>

<style type="text/css">

.miao {

  width:500px;

  height:220px;

  line-height:220px;

  border: 1px solid;

  text-align: center;

}

.miao img {

  vertical-align: middle;

}

</style>

<!--[if IE 6]>

<style type="text/css">

  .miao span {

    border: 1px solid red;

    height: 100%; /* 要保证和父元素高度一样才行 */

    writing-mode: tb-rl;

    vertical-align: middle;

  }

</style>

<![endif]-->

</head>

<body>

<h1>固定高宽的容器中，图片垂直局中。</h1>

<p>使用的绝对定位和相对定位的方法</p>

<div class="miao">

    <span><img src="http://bbs.blueidea.com/images/default/logo.gif" alt="Logo" /></span>你知道的太多了你知道的太多了你知道的太多了

</div>

<hr />

<div class="miao">

    <span><img src="http://bbs.blueidea.com/images/default/logo.gif" alt="Logo" /></span>你知道的太多了你知道的太多了你知道的太多了

</div>

<hr />

<div class="miao">

    <span><img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" alt="Google" /></span>你知道的太多了

</div>

</body>

</html>

/*yoom 粘贴开始 2010-01-18*/
因为Opera，FF3，IE8均支持display:talbe;这些特性了，因此改进的办法是：

<!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=utf-8" />

<title>利用定位来显示垂直局中的图片</title>

<style type="text/css">

.miao{width:170px;height:100px;display:table;text-align:center;border:solid 1px red;}

.miao span{display:table-cell;vertical-align:middle;border:solid 1px blue;}

.miao span img{border:dashed 1px green;}

</style>

<!--[if lte IE 7]>

<style type="text/css">

.miao{position:relative;overflow:hidden;}

.miao span{position:absolute;left:50%;top:50%;}

.miao span img{position:relative;left:-50%;top:-50%;}

</style>

<![endif]-->

</head>

<body>

<h1>固定高宽的容器中，图片垂直局中。</h1>

<p>绿色容器是span，目的是使自己的左上角与容器中心点对齐。红色是具体图片，再次设置负值使自己的中心点和父容器的中心点重合，最终达到垂直局中的目的。</p>

<div class="miao">

    <span><img src="http://bbs.blueidea.com/images/default/logo.gif" alt="Logo" /></span>

</div>

<hr />

<div class="miao" style="width:300px;height:80px;">

    <span><img src="ttp://bbs.blueidea.com/images/default/logo.gif" alt="Logo" /></span>

</div>

<hr />

<div class="miao" style="width:500px;height:220px;">

    <span><img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" alt="Google" /></span>

</div>

</body>

</html>

如果不喜欢条件注释，可自行将代码以css hack的方式拼凑起来。
原帖链接：未知高宽的图片垂直局中
/*yoom 粘贴结束*/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<style type="text/css">

<!--

* {margin:0;padding:0}

div {

    width:500px;

    height:500px;

    border:1px solid #ccc;

    overflow:hidden;

    position:relative;

    display:table-cell;

    text-align:center;

    vertical-align:middle

    }

div p {

    position:static;

    +position:absolute;

    top:50%

    }

img {

    position:static;

    +position:relative;

    top:-50%;left:-50%;

    width:276px;

    height:110px

    }

-->

</style>

<div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>

标准浏览器下另类方法:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<style type="text/css">

<!--

body {

    margin:0;padding:0

    }

div {

    width:500px;

    height:500px;

    line-height:500px;

    border:1px solid #ccc;

    overflow:hidden;

    position:relative;

    text-align:center;

    margin:auto

    }

div p {

    position:static;

    +position:absolute;

    top:50%

    }

img {

    position:static;

    +position:relative;

    top:-50%;left:-50%;

    width:276px;

    height:110px;

    vertical-align:middle

    }

p:after {

    content:".";font-size:1px;

    visibility:hidden

    }

-->

</style>

<div><p><img src="http://www.google.com/intl/en/images/logo.gif"/></p></div>

标准浏览器严格型申明下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<style type="text/css">

<!--

* {margin:0;padding:0}

div {

    width:500px;

    height:500px;

    line-height:500px;

    border:1px solid #ccc;

    overflow:hidden;

    position:relative;

    text-align:center;

    }

div p {

    position:static;

    +position:absolute;

    top:50%;

    vertical-align:middle

    }

img {

    position:static;

    +position:relative;

    top:-50%;left:-50%;

    width:276px;

    height:110px;

    vertical-align:middle

    }

-->

</style>

<div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>

利用字体大小的方法：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<style type="text/css">

* {margin:0;padding:0;}

div {

    width:500px;text-align:center;border:1px solid #f00;line-height:500px;

    height:500px;font-size:500px

    }

*>div{

    font-size:12px

    }

div img {

    vertical-align:middle

    }

</style>

<div>

<img src="http://www.google.com/intl/en/images/logo.gif" />

</div>

display:inline-block 方法

<!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>

最简单当然是背景图片的方法拉。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<style type="text/css">

* {margin:0;padding:0;}

div {

    width:500px;border:1px solid #f00;

    height:500px;

    background:url("http://www.google.com/intl/en/images/logo.gif") center no-repeat

    }

</style>

<div>

</div>

CSS图片垂直居中方法的更多相关文章

CSS图片垂直居中方法整理集合
原帖链接:http://bbs.blueidea.com/thread-2666987-1-1.html 1.因为Opera,FF3,IE8均支持display:talbe;这些特性了,因此改进的办法 ...
css图片垂直居中
css图片垂直居中一.style代码 .case-pic{ height: 125px; position: relative; text-align: center } .case-pic span ...
css水平垂直居中方法（一）
第五种方法: 首先设置一个div,设置其的width与height,为了方便观察,我定义了div的背景色为red,代码如下: <!doctype html> <html lang=& ...
css 图片垂直居中总结
1.利用vertical-align:middle: 父级元素设置成display:table-cell; 同级元素设置一个span标签设置display:inline-block:图片样式设置ve ...
CSS——图片替换方法比较
图片替换主要是指将文字替换成图片的技术,即在html语句中使用文字,浏览器显示时用对应的图片显示.其意义在于便于做网站优化(SEO),文字才是搜索引擎寻找的主要对象. 经典的替换方法: Fahrner ...
CSS元素垂直居中方法总结
坚持,坚持,坚持... 以上为自我鼓励,哈哈... ------------------------------------------------- 相信没有真正是尝试过的人应该都和我一样,觉得居中 ...
css元素垂直居中方法
1.Line-height 适用情景:单行文字垂直居中技巧这个方式应该是最多人知道的了,常见于单行文字的应用,像是按钮这一类对象,或者是下拉框.导航此类元素最常见到的方式了.此方式的原理是在于将单行 ...
CSS——图片替换方法：Fahrner图片替换法（FIR）
Html: <h1 id="fir"><span>Fahrner Image Replacement</span></h1> CSS ...
css上下垂直居中方法总结
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

c# ICSharpCode.SharpZipLib.Zip实现文件的压缩
首先了解ZipOutPutStream和ZipEntry对象 ZipOutPutStream对象如果要完成一个文件或文件夹的压缩,则要使用ZipOutputStream类.ZipOutputStre ...
装载：关于拉格朗日乘子法与KKT条件
作者:@wzyer 拉格朗日乘子法无疑是最优化理论中最重要的一个方法.但是现在网上并没有很好的完整介绍整个方法的文章.我这里尝试详细介绍一下这方面的有关问题,插入自己的一些理解,希望能够对大家有帮助. ...
ZOJ 1068 P,MTHBGWB
原题链接题目大意:给定一个字符串,先用Morse Code编码,把编码倒序,再解码成字符串.现给定处理后的字符串,求原始信息. 解法:用C++String类的函数.每次读入一个字符,就在string ...
Selenium WebDriver对cookie进行处理绕过登录验证码
现在几乎所有登录页面都会带一个验证码,做起自动化这块比较麻烦, 所以要绕过网站的验证码. 首先需要手动登录一次你的测试网站,去chrome的F12里获取这个网站的cookie信息,找到对应的保存登录信 ...
C++ Primer : 第十二章 : 动态内存之shared_ptr类实例：StrBlob类
StrBlob是一个管理string的类,借助标准库容器vector,以及动态内存管理类shared_ptr,我们将vector保存在动态内存里,这样就能在多个对象之间共享内存. 定义StrBlob类 ...
HDU 4599 概率DP
先推出F(n)的公式: 设dp[i]为已经投出连续i个相同的点数平均还要都多少次才能到达目标状态. 则有递推式dp[i] = 1/6*(1+dp[i+1]) + 5/6*(1+dp[1]).考虑当前这 ...
Sql Server_笔记
1.随机取出10条数据:select top 10 * from tablename order by newid()
tulterbot遥感操作使用Interactive Markers--12
原创博客:转载请表明出处:http://www.cnblogs.com/zxouxuewei/ 1.安装ros indigo功能包: sudo apt-get install ros-indigo-t ...
C中scanf/gets/fgets的区别
功能:同样是获取字符串. 区别: scanf 遇到空格/回车/Tab键认为输入结束, 但是空格/回车/Tab键仍会留在输入的缓冲区中.常见的是使用getchar(),处理scanf的后事:如果想要清除 ...
【转】BLE_CC2540_初学者入门指导
原文网址:http://www.deyisupport.com/question_answer/wireless_connectivity/bluetooth/f/103/t/61462.aspx 看 ...

CSS图片垂直居中方法

CSS图片垂直居中方法的更多相关文章

随机推荐

热门专题