老遇到这种样式 现在总结一下

<!DOCTYPE>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

<style>

    *{margin:0;padding:0;line-height: 1;font-size: '宋体';padding:0;font-size: 1em;}

    body{background-color: #000;}

    #canvas{width: 900px;margin:50px auto;}

    .box{width: 900px;height: 2000px;text-align: center;display: table-cell;background-color: #fff;*zoom:1;}

    .box em{width: 0;height: 100%;display: inline-block;vertical-align: middle;}

    .box img{display:inline-block;vertical-align: middle;}

</style>

</head>

<body>

<div id="canvas">

    <div class="box"><em></em><img src="http://e.hiphotos.baidu.com/image/pic/item/8d5494eef01f3a29a1dde8c79b25bc315c607ca5.jpg" alt="" /></div>

</div>

</body>

</html>

随机图片大小在DIV中垂直居中对齐总结的更多相关文章

  1. 设置span在div中垂直居中

    转自:https://blog.csdn.net/weirenkuan/article/details/51177695 使用display:table-cell,span中内容无论多少,都可以垂直居 ...

  2. 未知行数的文字在div中垂直居中

    今天工作中遇到一个问题,就是未知行数的文字在div中怎么垂直居中,如下面的3个图: 图1 图2 图3 图1是2行文字的效果,图2是不经过css垂直居中处理的效果,图3是经过css垂直居中后的效果,ht ...

  3. 尺寸不固定的图片在div中垂直居中并完全显示

    前几天做一个项目,需要批量上传图片,图片外侧div尺寸固定:由于图片是用户输入的,所以大小存在不确定性,产品需求是无论图片尺寸多大,都要垂直居中完全显示 废话不多说,直接上代码 html <ul ...

  4. CSS-布局【1】-图片在div中垂直居中

    方法一:通过增加100%高度行内块居中对齐 <!DOCTYPE html> <html> <head> <meta name="viewport&q ...

  5. 让图片在DIV中垂直居中

    window.onload=function(){ var img = document.getElementById("imgdiv"); var div = document. ...

  6. css文件 如何使背景图片大小适应div的大小

    对背景图片设置属性:background-size:cover;可以实现背景图片适应div的大小. background-size有3个属性: auto:当使用该属性的时候,背景图片将保持100% 的 ...

  7. 不定宽高的文字在div中垂直居中

    本人在面试的时候被问到:如何使一段不定宽高的文字垂直居中呢? 现在来总结一下: 在body中写入结构 <div id="main">    <div id=&qu ...

  8. 设置文字在div中垂直居中，使用line-height

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-02-19) line-height 行间距 详细使用方法:http://www.w3school.com.cn/css/pr ...

  9. 小的div在大的div中垂直居中

    方法一: 1.代码: <div style="width:200px;height:200px;border:solid blue;position:relative;"&g ...

随机推荐

  1. 0907 安装 Pycharm

    Pycharm Professional(专业版)最简单方法破解,亲测有效 简介 PyCharm是由JetBrains打造的一款Python IDE,VS2010的重构插件Resharper就是出自J ...

  2. RateLimiter令牌桶算法

    限流,是服务或者应用对自身保护的一种手段,通过限制或者拒绝调用方的流量,来保证自身的负载. 常用的限流算法有两种:漏桶算法和令牌桶算法 漏桶算法 思路很简单,水(请求)先进入到漏桶里,漏桶以一定的速度 ...

  3. 开始编写Makefile（三）Makefile的默认模式规则

    1.make中建立的其他语言的规则 SCCS  , RCS , ar, lex 和yacc 命令 2.为了建立一个目标,make会遍历一连串的依赖关系:这个是为 决定何处开始创建: 如果没有找到目标文 ...

  4. 8-3编码器，3-8译码器的verilog实现

    在数字系统中,由于采用二进制运算处理数据,因此通常将信息变成若干位二进制代码.在逻辑电路中,信号都是以高,低电平的形式输出.编码器:实现编码的数字电路,把输入的每个高低电平信号编成一组对应的二进制代码 ...

  5. 洛谷 P1152 欢乐的跳 题解

    洛谷 P1152 欢乐的跳 题目描述 一个nn个元素的整数数组,如果数组两个连续元素之间差的绝对值包括了[1,n-1][1,n−1]之间的所有整数,则称之符合"欢乐的跳",如数组1 ...

  6. 【CSP模拟赛】天才绅士少女助手克里斯蒂娜（线段树&读入优化&输出优化）

    题面描述 红莉栖想要弄清楚楼下天王寺大叔的显像管电视对“电话微波炉(暂定)”的影响.选取显像管的任意一个平面,一开始平面内有个n电子,初始速度分别为vi,定义飘升系数为 $$\sum_{1\leqsl ...

  7. mysql group by 报错 ，only_full_group_by 三种解决方案

    报错信息  Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggregated column 'data ...

  8. 20190710用控制台启动一个wcf服务

    快速阅读 如何用控制台启动一个wcf服务,已经wcf的配置和在类库中如何实现 . wcf类库 用vs新建一个类库,引用system.ServiceModel 定义接口实现服务契约和操作契约 [Serv ...

  9. ubuntu之路——day9.2 Covariate shift问题和Batch Norm的解决方案

    Batch Norm的意义:Covariate shift的问题 在传统的机器学习中,我们通常会认为source domain和target domain的分布是一致的,也就是说,训练数据和测试数据是 ...

  10. DELPHI给整个项目加编译开关

    DELPHI给整个项目加编译开关 project--options