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>
</table>

2、加一个0宽度、100%高度的图片。并且两张图都设为:vertical-align:middle

<div style="height:200px;border:1px solid #000;">
    <img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" style="vertical-align:middle;"/>
    <img src="" style="height:100%;width:0px;vertical-align:middle;"/><!-- 这里加一个0宽度、100%高度的图片 -->
</div>

3、单个图片水平垂直居中 一淘使用方案

<style type="text/css">
.box {
        /*非IE的主流浏览器识别的垂直居中的方法*/
        display: table-cell;
        vertical-align:middle;

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

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

        width:200px;
        height:200px;
        border: 1px solid #000;
}
.box img {
        /*设置图片垂直居中*/
        vertical-align:middle;
}
</style>
<div class="box">
<img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" />
</div>

4、在图片和容器高度,都是已知的情况下,计算margin-top (不推荐)

下图是容器高度200px,如片高度95px

<div style="height:200px;border:1px solid #000;">
    <img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" style="margin-top:52.5px;"/>
</div>
时间: 2024-10-10 14:48:29

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图片垂直居中

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

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:(只针对行内元素可行) 将行高设置成和父元素的高度相等,就可以实现行内元素的垂直居中了. 由于行内元素的对其方式是基线对齐,所以当图片和文字位于一列时,呈现出来的效果往往不是我们想要看到的样子, 我们要想将里面的元素都实现垂直居中,就应该分别对每个