<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

        *{

            margin: 0px;

            padding:0px;

        }

        html,body{

            height:100%;

            text-align: center;

        }

        body:after{

            content: "";

            display: inline-block;

            height:100%;

            vertical-align: middle;

            text-align: center;

        }

        img{

            vertical-align: middle;

            -webkit-box-reflect: left 10px;

            overflow: auto;

        }

        .test{

            text-align: left;

            text-indent:32px;

            display: inline-block;

            width:300px;

            height:300px;

            margin:auto;

            vertical-align: middle;

            background-color: pink;

        }

    </style>

</head>

<body>

<img class="test" src="../img/test.jpg" width="200px"/>

</body>

</html>

img 只定义宽度（或者制定一高度，图片会等比缩放），指定高度和宽度会出现拉伸，图片的居中可以决定定为，也可以使用同级的 after 属性设置样式：代码如下

:after{

            content: "";

            display: inline-block;

            height:100%;

            vertical-align: middle;

            text-align: center;

 }

效果： 先居中，再向左倒影

css 图片宽度、居中、倒影的更多相关文章

  1. css 图片文字居中

    1.单行文字居中 2.多行文字居中 3.利用background-position:center;的图片居中 4.利用display:table-cell;属性的图片居中 <!DOCTYPE h ...

  2. CSS图片宽度设置百分比 , 高度同宽度相同

    在图片长宽不相等的情况下,想将长宽设置为相等并且自适应屏幕,可以通过 js 的方式进行设置并通过监听 resize 来实时更新,但是这种方式很麻烦. 这里通过 css 来达到我们想要的效果: < ...

  3. 纯css 图片自适应居中

    html 结构 <div class="container"> <div class="content"></div> &l ...

  4. css 图片内容在不同分辨率下居中显示(演示的图片宽度是1920px，当图片宽度大于显示屏的宽度时)

    1.img 图片内容在不同分辨率下居中显示(如果隐藏多余,在img外面套一个div  设定overflow: hidden.div的大小就是img显示区域的大小) <!DOCTYPE html& ...

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

    css图片居中(水平居中和垂直居中) css图片居中分css图片水平居中和垂直居中两种情况,有时候还需要图片同时水平垂直居中,下面分几种居中情况分别介绍. css图片水平居中 利用margin: 0 ...

  6. 只用CSS实现容器内图片上下左右居中

    一直以来,大家都知道,DIV容器内设置 text-align:center 即可让图片居中,但是DIV内默认的图片是上对齐,不会上下居中,如果想要实现这样的效果,JS判断是比较麻烦的,因为DIV容器内 ...

  7. 漂亮的自适应宽度的多色彩CSS图片按钮

    一.素材               二.效果 三.CSS *{padding:0;margin:0} /*----------------------------------- 自适应宽度图片按钮 ...

  8. div css 图片和文字上下居中对齐

    想要图片和文字水平居中对齐很容易,可今天做这个树的时候,遇到了要将图片上下居中.这下就不知道怎么搞. 拿手册看也看不出所以然来,不同的浏览器对DIV的支持不一个,目前最好的浏览器是Firefox. 这 ...

  9. div css 伪类 不固定图片大小 居中， css div 实现三角形

    div css 伪类 不固定图片大小 居中 <style> .pic_box{width:300px; height:300px; background-color:#beceeb; fo ...

随机推荐

  1. SpringBoot系列（十三）统一日志处理，logback+slf4j AOP+自定义注解，走起！

    往期精彩推荐 SpringBoot系列(一)idea新建Springboot项目 SpringBoot系列(二)入门知识 springBoot系列(三)配置文件详解 SpringBoot系列(四)we ...

  2. 使用Proteus模拟操作HDG12864F-1液晶屏

    在Proteus中模拟了89C52操作HDG12864F-1液晶屏,原理图如下: 一.HDG12864F-1官网信息 该液晶屏是Hantronix的产品,官网上搜索出这个型号是系列型号中的一种,各种型 ...

  3. C++11之STL多线程

    STL库跨平台: VS2010不支持std::thread库,至少VS2012/2013及其以上可以: 一.库概要 (1)std::thread成员函数 thread(fun, args...); / ...

  4. u-boot spl 学习总结

    什么是SPL? SPL(secondary program loader)是一个十分小的bin文件,它是用来引导主u-boot文件.对于一些SRAM很小的SOC,无法一次性加载ROM中的bootloa ...

  5. Java并发编程实战 04死锁了怎么办？

    Java并发编程文章系列 Java并发编程实战 01并发编程的Bug源头 Java并发编程实战 02Java如何解决可见性和有序性问题 Java并发编程实战 03互斥锁 解决原子性问题 前提 在第三篇 ...

  6. [hdu5319]二进制表示，简单模拟

    题意:给一个矩形,矩形里面画了4种符号,'.'表示没画线,'R'表示画了红线,'B'表示画了蓝线,'G'表示红线和蓝线同时画了,并且矩形主对角线上只能画红线,副对角线上只能画蓝线,问最少画多少条线才能 ...

  7. P2220 [HAOI2012]容易题(快速幂)

    Describe 为了使得大家高兴,小Q特意出个自认为的简单题(easy)来满足大家,这道简单题是描述如下: 有一个数列A已知对于所有的A[i]都是1~n的自然数,并且知道对于一些A[i]不能取哪些值 ...

  8. Spring MVC 函数式编程进阶

    1. 前言 上一篇对 Spring MVC 的函数式接口编程进行了简单入门,让很多不知道的同学见识了这种新操作.也有反应这种看起来没有传统写法顺眼,其实大家都一样.但是我们还是要敢于尝试新事物.Jav ...

  9. zsy后台管理系统-架构设计

    Zsy框架总体架构设计 1.Mysql数据库,存储所有表的数据. 2.Zsy-基础项目(Zsy-Model,Zsy-Dao,Zsy-Service,Zsy-Web),基于SSM框架.项目功能包含基本的 ...

  10. 很好的awk教程

    讲的内容配合分析web log ,疗效很好! http://www.ibm.com/developerworks/cn/linux/l-cn-awk-httplog/ 出差归来,哈哈,吐槽的不必写了, ...