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

<!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. 使用Default Trace查看谁还原了你的数据库？

    select e.nameaseventclass,t.loginname,t.spid,t.starttime, t.textdata,t.objectid,t.objectname,t.datab ...

  2. Codeforces Round #604 (Div. 2) A,B,C【D题待补】

    思路:直接暴力判断就OK了 #include<bits/stdc++.h> using namespace std; #define int long long signed main() ...

  3. flutter 从接口获取json数据显示到页面

    如题,在前端,是个很简单的ajax请求,json的显示,取值都很方便,换用dart之后,除了层层嵌套写的有点略难受之外,还有对json的使用比js要麻烦 1. 可以参照 flutter-go 先封装一 ...

  4. 洛谷 P3143 [USACO16OPEN]钻石收藏家Diamond Collector 题解

    P3143 [USACO16OPEN]钻石收藏家Diamond Collector 题目描述 Bessie the cow, always a fan of shiny objects, has ta ...

  5. php grpc请求go,报Yac::get(): Unserialization failed

    大概说下yac是个啥东西..看鸟哥的博客 Yac 是为PHP实现的一个基于共享内存, 无锁的内容Cache Yac的两个应用场景:1.让PHP进程之间共享一些简单的数据2.高效地缓存一些页面结果 假设 ...

  6. 超炫酷的 Docker 终端 UI lazydocker

    A simple terminal UI for both docker and docker-compose, written in Go with the gocui library. https ...

  7. 【Vue.js游戏机实战】- Vue.js实现老虎-机抽奖总结

    大家好!先上图看看本次案例的整体效果. 完整版实战课程附源码:[Vue.js游戏机实战]- Vue.js实现老虎-机抽奖 实现思路: Vue component实现老虎-机组件,可以嵌套到任意要使用的 ...

  8. QTextToSpeech Win7奔溃

    在linux下,它是调用speech-dispatcher.在其它不同的平台上,调用各自平台的TTS引擎.所以在使用的时候,要确保本地的TTS引擎是可用的. 本地TTS引擎不可用可能会在声明QText ...

  9. 【转】利用Python将多个PDF合并为一个

    本脚本用来合并pdf文件,输出的pdf文件按输入的pdf文件名生成书签 使用示例如下: python pdfmerge.py -p "D:\pdf-files" -o " ...

  10. linux: QT安装时出现段错误segmentation fault

    环境:macOS 10.14.6 VMware Fusion版本:11.0.1 QT版本:qt-creator-linux-x86_64-opensource-2.5.2.bin 安装时出现:segm ...