<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. Object-C中release的机制问题

    今天写了例如以下的一段代码: for (NSInteger i = 0; i < 10000000; i++) { UIView * v = [[UIView alloc] init]; [v ...

  2. Android数据加密概述及多种加密方式 聊天记录及账户加密 提供高质量的数据保护

    Android数据加密概述及多种加密方式 聊天记录及账户加密 提供高质量的数据保护 数据加密又称password学,它是一门历史悠久的技术,指通过加密算法和加密密钥将明文转变为密文.而解密则是通过解密 ...

  3. WIN7下安装SVNserver端及client搭建协作环境

    一．客户场景: 客户现场须要在虚拟机上封闭开发,所以须要搭建一个SVN协作开发环境.客户提供了一台全新的裸机安装的操作系统是WIN7旗舰版64位. 二．SVNserver搭建 1. SVNserver ...

  4. SQL运行时间

    打开SQL运行时间统计  set timing on; 查询是否有运行时间较长的SQL存在  select a.sid, b.sql_text   from v$session a, v$sqlare ...

  5. Vue深度学习（2）

    Text 可以在表单的input 元素上使用v-model 指令来创建双向数据绑定.它会根据input元素的类型自动选取正确的绑定模式. <div id="app"> ...

  6. REST设计规则

    1.简介 REST(Representational State Transfer), 表述性状态转移是Roy Fielding博士在2000年他的博士论文中提出来的一种软件架构风格. REST只是一 ...

  7. 八、 Spring Boot 过滤器、监听器

    直接使用@WebFilter和@WebListener的方式,完成一个Filter 和一个 Listener.过滤器(Filter)文件MyFilter.Javapackage org.springb ...

  8. 超详细的 Linux CentOS 编译安装python3

    前言: 安装完CentOS7后,执行#Python与#python -V,看到版本号是2.6,而且之前写的都是跑在python3.X上面的,3.X和2.X有很多不同,在这里我就不弊述两者之间的区别了新 ...

  9. 数据库、ArcCatalog空间数据源正常访问，数据库设置没问题时，ArcEngine连接SDE时报"ORA-12560: TNS: 协议适配器错误"的解决办法;ArcEngine连接SDE总结

    碰到的问题描述: 通过C# 基于ArcEngine写SDE直连的时候测试项目连接属性设置为如下: tPropSet.SetProperty("User", "GISDAT ...

  10. 「mysql优化专题」主从复制面试宝典！面试官都没你懂得多！(11)

    内容较多,可先收藏,目录如下: 一.什么是主从复制 二.主从复制的作用(重点) 三.主从复制的原理(重中之重) 四.三步轻松构建主从 五.必问面试题干货分析(最最重要的点) 一.什么是主从复制(技术文 ...