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

<!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. RestTemplate 使用中的几个问题

    Spring Boot使用RestTemplate消费REST服务的几个问题记录 我们可以通过Spring Boot快速开发REST接口,同时也可能需要在实现接口的过程中,通过Spring Boot调 ...

  2. Kubernetes 学习25 创建自定义chart及部署efk日志系统

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

  3. cube.js 学习（三）cube.js data schema

    cube.js的 data schema 类似graphql 的type 定义,但是cube.js 的data schema 更偏向于dsl, 其中抽象了进行数据分析应用开发中的东西,自己提炼了mea ...

  4. 在Typora中使用Latex

    https://blog.csdn.net/happyday_d/article/details/83715440 今后可能更多在本地编辑出Markdown之后复制上博客或者上传到GitHub.

  5. 浅谈Python-IO多路复用(select、poll、epoll模式)

    1. 什么是IO多路复用 在传统socket通信中,存在两种基本的模式, 第一种是同步阻塞IO,其线程在遇到IO操作时会被挂起,直到数据从内核空间复制到用户空间才会停止,因为对CPython来说,很多 ...

  6. iframe中用到的例子

    <view:qrytr>         <view:qrytd colspan="4">     <iframe id="ccbl&quo ...

  7. etcd安装

    etcd有三种集群化启动的配置方案,分别为静态配置启动.etcd自身服务发现.通过DNS进行服务发现,重点讲一下静态配置启动.根据启动环境,可以选择不同的配置方式.这也是新版etcd区别于旧版的一大特 ...

  8. 记一次SpringContextHolder.getBean出现异常NoClassDefFoundError: Could not initialize class

    代码如下: public class TestUtils { private static UserDao logDao = SpringContextHolder.getBean(UserDao.c ...

  9. jQuery学习笔记——基本了解

    安装 两种方法: 从 jquery.com 下载jQuery. 从 CDN 中载入 jQuery, 如从我的博客中加载 jQuery: <script src="https://blo ...

  10. ubuntu之路——day10.7 提高模型的表现

    总结一下就是在提升偏差的方面(即贝叶斯最优误差和训练误差的差距) 1.尝试更大更深的网络 2.加入优化算法比如前面提过的momentum.RMSprop.Adam等 3.使用别的神经网络架构比如RNN ...