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

<!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. sublime+python3 中文环境

    工具-编译系统-新编译系统 { "cmd": ["C:/Program Files (x86)/Python36-32/python.exe","-u ...

  2. PDB符号文件浏览工具介绍

    一.SymView SymView工具用来显示符号文件中包含的符号表和符号数据.目前支持微软的Visual C/C++和C#编译器产生的DBG格式的符号文件和PDB格式的符号文件. SymView提供 ...

  3. 数据科学速查手册（包括机器学习，概率，微积分，线性代数，python，pandas，numpy，数据可视化，SQL，大数据等方向）

    介绍:https://redstonewill.com/2372/ 项目网址:https://github.com/FavioVazquez/ds-cheatsheets

  4. Random Target Moving~

    测试了一下用向量处理随机目标,还是挺有趣的,源码如下: PVector p1, p2; float gap = 10; void setup() { size(1920, 1080); backgro ...

  5. idea maven No implementation for org.apache.maven.model.path.PathTranslator was bound.

    查看idea log 2019-11-08 22:30:29,402 [ 475319] ERROR - #org.jetbrains.idea.maven - IntelliJ IDEA 2018. ...

  6. c++和cuda混合编程 实现传统神经网络

    直接放代码了... 实现的是x1+x2=y的预测,但梯度下降很慢...233333,gpu运行时间很快!! // // main.cpp // bp // // Created by jzc on 2 ...

  7. 洛谷P3522 TEM-temperature

    题目 单调队列+阅读理解 简化题意. 找到一个最长的区间使得区间每个点的r要大于该点之前的点的l. 然后可以用单调队列维护单调递减的l.最后尺取法O(n)枚举所有区间并取最大值. 单调队列可以快速找某 ...

  8. Navicat premium查看数据库表中文注释的两种方式

    有时候我需要查看数据库表中文注释,来确定每个表存的是哪个模块的数据,确保测试时对数据库查询操作无误. 这个操作我忘记了,此处做一个记录 方式一:通过sql语句来,前提是你知道是哪个表,这种方式不容易改 ...

  9. nodejs新工具-cypress和testcofe的崛起

    今天咨询一个自动化 工具问题,偶然间有人提起了这个可能以后会很火的工具,在此找到一篇很好的参考文章 记录并为以后做准备 cypress和testcofe https://www.jianshu.com ...

  10. C++2.0新特性(四)——<decltype、lambda>

    一.关键字decltype 引入新关键字decltype可以让编译器找出表达式的类型,为了区别typeof,以下做一个概念区分: typeof 是一个一元运算,放在一个运算数之前,运算数可以是任意类型 ...