<BODY>
<div class="box">
<span class="car"></span>
<img src="data:images/01.jpg" title="car" />
</div>
</BODY>

.box {
width: 100%;
overflow: hidden;
text-align: center;
/*font-size: 0;*/
border: 1px solid #000000;
margin: 50px auto;
}
.box .car {
display: inline-block;
width: 0;
height: 100%;
font-size: 0;
line-height: 0;
vertical-align: middle;
}
.box img {
vertical-align: middle;
}

参考：http://linxz.github.io/tianyizone/middle_02.html

未知宽高图片水平垂直居中在div的更多相关文章

  1. CSS未知宽高元素水平垂直居中

    方法一 :table.cell-table 思路:显示设置父元素为:table,子元素为:cell-table,这样就可以使用vertical-align: center,实现水平居中优点:父元素(p ...

  2. table-cell实现未知宽高图片，文本水平垂直居中在div

    <BODY> <h1>未知宽高的图片水平垂直居中在div</h1> <!--box-outer--> <div class="box-o ...

  3. css两种常用的不定宽高的水平垂直居中方法，记住它，不再为样式发愁

    css 几种常用的简单容易记住的水平垂直居中方法 前言 正文 第一种方法 第二种方法 结束语 前言 我们在设计网页时,会大量的运用到水平垂直居中,如果知道元素的宽高,那水平垂直居中是很简单的,无非是用 ...

  4. IOS UITableView 加载未知宽高图片的解决方案

    在开发中遇到了UITableView列表 UITableViewCell装载图片但不知Image的宽高 问题. 在解决该问题的时候,首先想到的是异步加载图片 采用第三方框架SDWebImage 实现对 ...

  5. 纯CSS实现图片水平垂直居中于DIV（图片未知宽高）

    <div class="demo"><a href="#"><img src="http://nec.netease.c ...

  6. css/css3实现未知宽高元素的垂直居中和水平居中

    题目:.a{ width: 200px; height: 200px; background-color: #ccc;} <body> <div class="a" ...

  7. 未知宽高div水平垂直居中3种方法

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head&g ...

  8. 已知宽高和未知宽高的div块的水平垂直居中

    //已知宽高的情况 .div1_container{     border:1px solid #00ee00;     height:300px;     position:relative; } ...

  9. div+css实现未知宽高元素垂直水平居中

    div+css实现未知宽高元素垂直水平居中.很多同学在面试的时候都会遇到这样的问题:怎么用div+css的方法实现一个未知宽高的弹出框(或者图片)垂直水平居中??如果用JS的话就好办了,但是JS的使用 ...

随机推荐

  1. window.open()被拦截问题

    最近做项目的时候遇到一个需求,在商品详情页面中点击购买按钮,之后再新标签页中打开生成的订单页面,所以想用window.open()来实现.但是测试的时候发现打开的链接被浏览器拦截. 之后,开始在网上查 ...

  2. nyist oj 756 重建二叉树

    重建二叉树 时间限制:1000 ms  |  内存限制:65535 KB 难度:3 描写叙述 题目非常easy.给你一棵二叉树的后序和中序序列,求出它的前序序列(So easy!). 输入 输入有多组 ...

  3. Asp.net MVC 填充word并下载

    使用Aspose.word填充内容并下载(免费版Aspose) 填充固定模式的Word文档,需要先制作Word模板: Aspose.Words主要通过Words里域(Fields)来控制内容.     ...

  4. 如何在Gulp中提高Browserify的打包速度

    使用Browserify打包js时如果项目变得越来越大,编译时间就会相应变得越来越长.使用官方的插件watchify是个比较有效的提高速度方案. 提速原理 watchify的用法和gulp的watch ...

  5. springboot学习笔记-4 整合Druid数据源和使用@Cache简化redis配置

    一.整合Druid数据源 Druid是一个关系型数据库连接池,是阿里巴巴的一个开源项目,Druid在监控,可扩展性,稳定性和性能方面具有比较明显的优势.通过Druid提供的监控功能,可以实时观察数据库 ...

  6. ERR Unsupported CONFIG parameter: notify-keyspace-events; nested exception is redis.clients.jedis.exceptions.JedisDataException

    异常信息 时间:2017-04-05 15:53:57,361 - 级别:[ WARN] - 消息: [other] The web application [ROOT] appears to hav ...

  7. Asp.Net Web API（一）

    什么是Web API HTTP不仅仅服务于Web Pages.他也是一个创建展示服务和数据的API的强大平台.HTTP是简单的,灵活的,无处不在的.你能够想象到几乎任何的平台都会有HTTP服务库.HT ...

  8. iOS 数据加密方案

    iOS安全攻防(二十三):Objective-C代码混淆 提交用户的隐私数据 一定要使用POST请求提交用户的隐私数据GET请求的所有参数都直接暴露在URL中请求的URL一般会记录在服务器的访问日志中 ...

  9. slowhttptest慢攻击工具介绍

    slowhttptest介绍 Slowhttptest是依赖HTTP协议的慢速攻击DoS攻击工具,设计的基本原理是服务器在请求完全接收后才会进行处理,如果客户端的发送速度缓慢或者发送不完整,服务端为其 ...

  10. Python 初体验

    2017的最后一天,在QC的谆谆教诲下,我终于写(背)了九道题,对Python的基本语法有了一个大致了解. 1.A+B+C 就是为了练输入,line=input().split()  录入列表,分割开 ...