<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. DOM操作整理

    DOM获取 1. 直接获取 document.getElementById("box_id") 通过ID获取 document.getElementsByName("my ...

  2. SQL_Server 学习笔记（一）

    一:SQL基础 1 SQL SELECT DISTINCT 语法 SELECT DISTINCT Company FROM Orders 2.TOP SELECT TOP number|percent ...

  3. linux crontab yum安装

    crontab工具来做计划任务,定时任务,执行某个脚本等等 1.检查是否已安装crontab # crontab -bash: crontab: command not found 执行 cronta ...

  4. quickhybrid】如何实现一个Hybrid框架

    章节目录 [quickhybrid]如何实现一个跨平台Hybrid框架 [quick hybrid]架构一个Hybrid框架 [quick hybrid]H5和Native交互原理 [quick hy ...

  5. javascript实时保存时出现改动多条记录的bug

    文章实现编辑,编辑页面是右側弹出层,当有改动时就保存,对文章标题title加入改变change事件,有改变时就保存文章(saveArticle) $("#title").chang ...

  6. ccbpm工作流引擎是怎样支持多种流程模式的

    前言: 在BPM领域支持流程运转的理论模型有多种.有的21种.28种.32种. 每种模式都代表了这样的模式的理论设计者研究者的人员主张.思想.这些模式尽可能的,全然去覆盖到现实生产.工作.应用上的流程 ...

  7. 【Java系列】Eclipse与Tomcat

    描述 本篇文章简要讲述Eclipse和Tomcat搭建,具体包括如下内容: (1)Eclipse安装和汉化 (2)Tomcat安装和CATALIAN_HOME变量配置 (3)在Eclipse中配置To ...

  8. Linux常用目录结构

    此文引用自51CTO博客,博主snail_hf,原文地址<Linux系统目录详解(全而易懂)> 目录结构 / 根目录,处于Linux系统树形结构的最顶端,它是Linux文件系统的入口,所有 ...

  9. MPSOC之5——开发流程BOOT.BIN

    需要把若干文件打成大包,烧写到flash或者sd卡中,才能启动运行. 1.petalinux打包 petalinux-packet打包时,需要petalinux的工程,限制太死了,不用. 2 wind ...

  10. 在用python操作mysql时报错：ModuleNotFoundError: No module named 'MySQLdb'

    用Flask+python+mysql写一个小项目 系统 win10 py版本:3.6.1 在配置数据库时报错ModuleNotFoundError: No module named 'MySQLdb ...