css图片垂直居中

css图片垂直居中
一.style代码

    .case-pic{
        height: 125px;
        position: relative;
        text-align: center
    }
    .case-pic span{
        display: inline-block;
        height: 100%;
        vertical-align: middle;
    }
    .case-pic .img{
        height: 60px;
        vertical-align:middle;
    }

二.html代码

<div class="case-pic"><span></span><img src="public/images/case_1.jpg" alt="" /></div>
				
时间: 2024-10-10 14:48:28

css图片垂直居中的相关文章

备忘:CSS图片垂直居中全兼容淫技整理集合

1. ie的文档流样式 writing-mode:tb-rl .box1 a{    writing-mode:tb-rl;  /* 触发layout 后面高度生效,文档流 自上往下,自右往左,宽度要自适应,文字方向在垂直方向居中 */    height:100%;    vertical-align:middle} 2. inline-block方式 .box2 i{    zoom:1; height:100%; width:0; /* 触发layout,撑起行内的高度,宽度为0,不占横向

css:图片垂直居中

图片在容器中垂直居中,有几种方式: 1.放在table里 (最简单直接的方法) <table style="height:200px;border:1px solid #000;"> <tr> <td> <img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" /> </td> </tr>

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 时,文档流是从上到下,从右到左书

CSS图片垂直居中方法整理集合

原帖链接:http://bbs.blueidea.com/thread-2666987-1-1.html 1.因为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"> <

css图片居中(水平居中和垂直居中)

http://www.51xuediannao.com/html+css/htmlcssjq/css_img_center.html css图片居中分css图片水平居中和垂直居中两种情况,有时候还需要图片同时水平垂直居中,下面分几种居中情况分别介绍 css图片居中分css图片水平居中和垂直居中两种情况,有时候还需要图片同时水平垂直居中,下面分几种居中情况分别介绍. css图片水平居中 利用margin: 0 auto实现图片水平居中 利用margin: 0 auto实现图片居中就是在图片上加上c

前端技术之CSS实现图片垂直居中

前端技术之CSS实现图片垂直居中技术 maybe yes 发表于2015-03-14 18:52 原文链接 : http://blog.lmlphp.com/archives/86/The_front-end_technology_pure_CSS_to_achieve_image_vertically  来自 : LMLPHP后院 让 图片实现水平居中比较简单,只需要在父级容器中添加属性 text-align 为 center 即可.使用纯 CSS 实现图片的垂直居中,可以将图片包裹容器的 d

CSS让图片垂直居中的几种技巧

在网页设计过程中,有时候会希望图片垂直居中的情况.而且,需要垂直居中的图片的高度也不确定,这就会给页面的布局带来一定的挑战.下面总结了一下,曾经使用过的几种方法来使图片垂直居中,除了第一种方法只限于标准浏览器外,另外两种方法的兼容性还不错. 方法一 将外部容器的显示模式设置成display:table,这个设置的意思不用多说了吧… img标签外部再嵌套一个span标签,并设置span的显示模式为display:table-cell,这样span内部的内容就相当于表格,可以很 方便的使用verti

兼容各种浏览器的图片垂直居中CSS解决方案

1.通过添加一无语义图片来解决图片垂直居中CSS,兼容各种IE6,IE7,火狐,谷歌等浏览器. <style> .itm{border:2px solid #ccc;width:160px;height:160px;text-align:center;} .blank{width:0;height:160px;} .itm img{vertical-align:middle;} </style> <div class="itm"> <img s

几种垂直居中的方式及CSS图片替换技术

由于块级元素的高度是可以设置的,所以对于块级元素的垂直居中比较简单. 方法一: 在不定高的情况下,把元素的上下内边距设为同一个值即可实现,即padding :10px   0; 以上方法针对块级元素和行内元素都可以. 方法二: line-height:(只针对行内元素可行) 将行高设置成和父元素的高度相等,就可以实现行内元素的垂直居中了. 由于行内元素的对其方式是基线对齐,所以当图片和文字位于一列时,呈现出来的效果往往不是我们想要看到的样子, 我们要想将里面的元素都实现垂直居中,就应该分别对每个