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

<!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. MySQL读写分离项目配置

    一.项目信息 1.拓扑 二.环境规划 1.主机信息 2.软件信息 3.MySQL中间件 三.配置

  2. JS数组去重整理合集

    1.利用splice var arr = [1,2,3,4,5,6,7,8,9,9,8,7,6,5,4,3,2,1]; function repeat(arr){ for(var i = 0;i< ...

  3. C二维字符数组的使用及如何获取二维数组的总行数和总列数！

    #include <stdio.h> #include <stdlib.h> int main(){ char str[][30] = {"zhangsan" ...

  4. 汇编语言DOSBox软件使用方法

    https://wenku.baidu.com/view/e63b8b46ccbff121dc368305.html

  5. copy()函数技术推演

    /*** str_copy.c ***/ #include<stdio.h> void copy_str21(char *from, char *to) { for(; *from != ...

  6. A. Vasya and Book ( Codeforces Educational Codeforces Round 55 )

    题意:当前在看书的第 x 页,每次可以向前或者向后翻 d 页,这个书一共 n 页,问能否用最小操作翻到第 y 页. 题解:三种情况:1.直接翻能到的一定最短. 2.先翻到第一页,然后往后翻,翻到第 y ...

  7. pycharm通过pytest运行报错：No test were found 解决

    今天写代码犯了一个不应该犯的小错误,通过记录下来便于查看 1.报错代码如下: platform win32 -- Python 3.7.3, pytest-4.0.2, py-1.8.0, plugg ...

  8. Bmob-Rest-API之使用

    针对最近这样的需求,某个功能插入数据成功并实时同步到Bmob云上的数据库. 本来想在Bmob上找一个用Java写的,找了一圈发现没有,于是便采用Bmob的Rest-API方式进行数据插入. 另外补充一 ...

  9. [Windows] 输入字符间距变宽

    今天在输入时,不会到误触到哪里,输入的字符间距变得很宽,如下图: 最后找到原因是不小心同时按下了 Shift+Space(空格),进入全角模式,就会导致输入的字符间距变宽 想要恢复,再按一次 shif ...

  10. 深度学习面试题16：小卷积核级联卷积VS大卷积核卷积

    目录 感受野 多个小卷积核连续卷积和单个大卷积核卷积的作用相同 小卷积核的优势 参考资料 感受野 在卷积神经网络中,感受野(Receptive Field)的定义是卷积神经网络每一层输出的特征图(fe ...