实现图片垂直居中的方法

转载 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

>

利用vertical-align:middle实现行内元素的水平垂直居中对齐

最终实现效果为实现行内元素的水平、垂直居中对齐,效果图如下:    接下来为实现代码:  复制代码 代码如下:       利用vertical-alig...
  • oscar92420aaa
  • oscar92420aaa
  • 2016年05月24日 11:56
  • 1597

图片垂直水平居中的N种方法

div内容水平垂直居中解决方案
  • playboyanta123
  • playboyanta123
  • 2014年10月08日 21:35
  • 3128

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

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

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

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

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

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

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

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

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

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

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

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

css实现垂直居中的方法

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

各浏览器下图片垂直居中的方法

各浏览器下图片垂直居中的方法: 1.IE6下使用writing-mode:tb-rl;当writing-mode为tb-rl 时,文档流是从上到下,从右到左书写。然后设置text-align: cen...
  • regenkin
  • regenkin
  • 2011年05月12日 21:03
  • 188
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:实现图片垂直居中的方法
举报原因:
原因补充:

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