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

<!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. Kubernetes 学习25 创建自定义chart及部署efk日志系统

    一.概述 1.我们说过在helm架构中有这么几个关键组件,helm,tiller server,一般托管运行于k8s之上,helm能够通过tiller server在目标k8s集群之上部署应用程序,而 ...

  2. Kubernetes 学习10 Service资源

    一.Service对应组件关系 1.在kubernetes平台之上,pod是有生命周期的,所以为了能够给对应的客户端提供一个固定的访问端点,因此我们在客户端和服务Pod之间添加一个固定的中间层,这个中 ...

  3. 给各阶段java学习者的建议[转]

    第一部分:零基础或基础薄弱的同学这部分主要适用于尚未做过Java工作的同学,包括一些在校生以及刚准备转行Java的同学.一.Java基础首先去找一个Java的基础教程学一下,这里可以推荐达内java课 ...

  4. [matlab工具箱] 曲线拟合Curve Fitting

    ——转载网络 我的matlab版本是 2016a 首先,工具箱如何打开呢? 在 apps 这个菜单项中,可以找到很多很多的应用,点击就可以打开具体的工具窗口 本文介绍的工具有以下这些: curve F ...

  5. 2017.10.6 国庆清北 D6T2 同余方程组

    题目描述 求关于x 的同余方程组 x%a1 = b1 x%a2 = b2 x%a3 = b3 x%a4 = b4 的大于等于0 的最小整数解. 输入输出格式 输入格式: 一行8 个整数,表示a1; b ...

  6. P4555 【[国家集训队]最长双回文串】

    不知道有没有人跟我一样数据结构学傻了 首先这道题是要求回文串,那么我们可以想到manacher算法 但由于\(manacher\)不能求出双回文子串,我们要考虑一些性质 首先对于一个回文串,删掉两边的 ...

  7. AtCoder Grand Contest 008题解

    传送门 \(A\) 分类讨论就行了 然而我竟然有一种讨论不动的感觉 int x,y; inline int min(R int x,R int y){return x<y?x:y;} inlin ...

  8. OpenStack Restful API框架介绍

    1  pecan框架介绍 1.1  什么是pecan pecan是一个轻量级的python web框架,最主要的特点是提供了简单的配置即可创建一个wsgi对象并提供了基于对象的路由方式. 主要提供的功 ...

  9. CTYZ的树论赛(P5557 旅行/P5558 心上秋/P5559 失昼城的守星使)

    总结 由于受中秋节影响,没能在比赛时间内切掉\(T3\) 思维难度\(T1<T2<T3\),代码难度\(T1>T2>T3\) P5557 旅行 显然跳到环上去后就可以直接模了, ...

  10. DDD应对运营活动系统腐化实践

    前言 任何人类的设计都会腐化,软件系统也不例外 腐化之谜 随着系统的规模增长和复杂度膨胀,系统会慢慢腐化. 于是改一个很简单的下单地址,就会牵动整个交易系统十几处的改动. 如何解决这种腐化之谜呢? 参 ...