<!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. 《Docker从入门到跑路》之简介

    什么是Docker Docker,中文翻译是"码头工人".根据官方的定义,Docker是以Docker容器为资源分割和调度的基本单元,封装了整个软件运行的环境,为开发者和系统管理员 ...

  2. Spring官网阅读（五）BeanDefinition（下）

    上篇文章已经对BeanDefinition做了一系列的介绍,这篇文章我们开始学习BeanDefinition合并的一些知识,完善我们整个BeanDefinition的体系,Spring在创建一个bea ...

  3. 【Spark】DataFrame关于数据常用操作

    文章目录 DSL语法 概述 实例操作 SQL语法 概述 实例操作 DSL语法 概述 1.查看全表数据 -- DataFrame.show 2.查看部分字段数据(有4种方法)  (1) DataFram ...

  4. Queue-PriorityQueue源码解析

    Queue队列通常是先进先出(FIFO),但也有特殊的非FIFO,如本文也分析的PriorityQueue. Queue接口 Queue接口定义的方法: 添加元素接口: add(E e) -> ...

  5. Mysql常用sql语句（18）- union 全连接

    测试必备的Mysql常用sql语句系列 https://www.cnblogs.com/poloyy/category/1683347.html 前言 其实Mysql并没有全连接,Oracle才有全连 ...

  6. [hdu5226]组合数求和取模(Lucas定理)

    题意:给一个矩阵a,a[i][j] = C[i][j](i>=j) or 0(i < j),求(x1,y1),(x2,y2)这个子矩阵里面的所有数的和. 思路:首先问题可以转化为求(0,0 ...

  7. Ubuntu：Tkinter无法导入

    最近想写个GUI小程序,所以就使用了python内置的Tkinter包,但是导入时竟然提示没有这个包? 使用命令搜索了下: sudo apt search python3-tk ,显示已经安装了.又重 ...

  8. 基于Nettty打造自己的MVC服务器

    最近开始折腾Netty,体验下NIO编程.既然学习了,就要做点东西出来,要不然不容易掌握学到的东西.在Netty的官方demo上都有各种case的sample,打造Http服务器的核心代码就是从Sam ...

  9. 【SMB源码解析系列】——004.AreaParserTaskControl行列绘制控制程序

    前提知识: 任天堂游戏系统的画面分辨率是256*240像素,基本的显示单位是tile,包含8x8=64个像素 根据电视机的制式不同,NTSC制式只显示256*224,也就是32x28个tile,画面的 ...

  10. AT命令集详解

    1.2 AT的优点. 命令简单易懂,并且采用标准串口来收发AT命令,这样对设备控制大大简化了,转换成简单串口编程了. AT命令提供了一组标准的硬件接口--串口.这个简化的硬件设计.较新的电信网络模块, ...