实现图片垂直居中的方法

转载 2015年07月09日 18:51:05

div水平居中很容易,设置css样式 text-align: center;  就可以了。

垂直居中也有个属性 vertical-align: middle; 这个属性普通设置是没有效果的。

通过一个空白图片可以达到垂直居中的效果。

复制代码
<html>
    <style>
    #image{ 
        width:500px;
        height:500px;
        background:#fff000;
        text-align: center;
        overflow: hidden;
    }
    #image img {
    vertical-align: middle;
   }
    #block {
        width: 0px;
        height: 100%;
    }    
    </style>
    <body>
        <div id="image">
            <img src="http://www.mm21.cn/dimg6/qqtu/201105/20110507234620615.jpg"/>
             <img src="" id="block"/>
        </div>
    </body>
</html>
复制代码

 

 个人觉得vertical-align: middle 是相对于左边的高度垂直居中的,我给左边一个填满div的图片,就可以实现垂直居中了。

<转至

垚淼博客http://www.cnblogs.com/ljmin/archive/2012/07/03/ljmin.html

>

相关文章推荐

web页面开发过程中让图片垂直居中的三种方法

图片居中 *{ padding:0; margin:0; } /*方法一*/ /* .view{ width: 600px...

P标签莫名有了margin-top值的原因

这个标签中,我们可以看到元素有margin-top:16px,在样式表中可以看到给p标签设的值里面并没有一个margin-top16。我偶然发现useragent里面有一个  -webkit-marg...

使用纯CSS实现未知尺寸的图片(但高宽都小于500px)在500px的正方形容器中水平和垂直居中。你有几种方法?

解决这个问题有多种方法 1.使用css hack 处理ie6下的问题。 2.嵌入其它标签使其垂直居中。 方法一:  .box {             /*非IE的主流浏览器识别的...

html+css使用空白标签巧妙实现不同尺寸的图片在容器里垂直居中的方法

实现图片在容器累垂直居中有多种方法,例如使用计算高度使用margin,透明gif图片+背景定位等等,其中很多方法比较繁琐兼容性也不好,例如用position方法。下面为大家介绍两种比较简洁的方法,一种...

实现任意图片垂直居中的三种方法

在网站开发过程中,可能会有希望图片垂直居中的情况,而且,需要垂直居中的图片的高度也不确定,这就会给页面的布局带来一定的挑战。我总结了一下,曾经使用过的几种方法来使图片垂直居中,除了第一种方法只限于标准...

实现任意图片(高度不确定)垂直居中的三种方法

在网站开发过程中,可能会有希望图片垂直居中的情况,而且,需要垂直居中的图片的高度也不确定,这就会给页面的布局带来一定的挑战。我总结了一下,曾经使用过的几种方法来使图片垂直居中,除了第一种方法只限于标准...
  • perny
  • perny
  • 2013年09月17日 10:43
  • 521

图片垂直居中的代码的几种方法

  • 2013年03月27日 15:55
  • 30KB
  • 下载

css实现垂直居中的方法

  • 2009年12月16日 13:43
  • 2KB
  • 下载

图片垂直居中的5种css方法

图片垂直居中的css方法今天我要介绍的是采用css进行图片居中的5个方法。首先确定我们的HTML结构(若不特别说明,下面皆采用该HTML结构) 1.此方法会在img标签前加上一个inline-b...

CSS图片垂直居中方法

图片垂直居中是个经典的问题,网上关于这个的方法也非常多,良莠不齐,本人比较推荐的以下三种简单的方法,大家可以稍做参考。 1.淘宝的方法 在曾经的"淘宝UED招聘"中有这样一道题目: ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:实现图片垂直居中的方法
举报原因:
原因补充:

(最多只允许输入30个字)