单个未知大小图片在div里面垂直居中的方法。。。添加辅助元素挤一下位置达到居中

 
<div class="ServicesLiTopPic">
<i></i>
<img class="YuYue1" src="data:images/ReserveServices/YuYue1.png" /> </div>
 
.ServicesLiTopPic i {
display:inline-block;
height:100%;
vertical-align:middle
} .ServicesLiTopPic .YuYue1{display:inline-block;vertical-align:middle;}

单个未知大小图片在div里面垂直居中的方法。。。添加辅助元素挤一下位置达到居中的更多相关文章

  1. 尺寸不固定的图片在div中垂直居中并完全显示

    前几天做一个项目,需要批量上传图片,图片外侧div尺寸固定:由于图片是用户输入的,所以大小存在不确定性,产品需求是无论图片尺寸多大,都要垂直居中完全显示 废话不多说,直接上代码 html <ul ...

  2. 未知高度的图片在div设置垂直居中

    方法一: 该方法是将外部容器的显示模式设置成display:table,img标签外部再嵌套一个span标签,并设置span的显示模式为display:table-cell,这样就可以很方便的使用ve ...

  3. javascript的未知尺寸图片保持比例水平垂直居中函数

    JavaScript的图片在容器内水平垂直居中的函数,利用图片加载获取图片大小,使之在父节点内水平垂直居中 展示方式有两种: 1.当参数keepImageFull为true:保持图片比例,使图片可完整 ...

  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. DIV里面的图片水平与垂直居中的方法

    <div class=“box”> <img /> </div> 1.水平居中: 1)box设置  text-align:center ;    text-alig ...

  7. DIV或者DIV里面的图片水平与垂直居中的方法

    <div class=“box”> <img /> </div> 水平居中的常用方式: text-align:center ——这可以实现子元素字体,图片的水平居中 ...

  8. css参考文档; 官方英文说明!! 1 margin padding 百分比参照物 2 margin值为auto时的说明 3 div在div里垂直居中方法 4 dispaly:flex说明

    css参考文档        http://css.doyoe.com/ 两篇很好的文章:(下面的css官方英文说明链接 有时间可以研究下 http://www.w3.org/TR/css3-box/ ...

  9. css的div垂直居中的方法,百分比div垂直居中

    前言 我们都知道,固定高宽的div在网页中垂直居中很简单,相信大家也很容易的写出来,但是不是固定高宽的div如何垂直居中呢?我们在网页布局,特别是手机等web端网页经常是不固定高宽的div,那么这些d ...

随机推荐

  1. Unity3D shader脚本

    Unity中的shader脚本,是用叫做shaderlab的脚本语言来写.这个unity中的shader不只是DX中HLSL写的顶点和像素shader,而应该说是对应着DX中的Effect脚本,定义了 ...

  2. BZOJ3749 : [POI2015]Łasuchy

    设f[i][S]表示第i份食物被两个人吃的状态为S是否有可能,枚举f[1][]的情况后检验 f[i][0]=(f[i-1][1]&a[i-1]>=a[i])|(f[i-1][3]& ...

  3. HDU1853 & 蜜汁建图+KM模板

    题意: 给你一个N个点M条边的带权有向图,现在要你求这样一个值:该有向图中的所有顶点正好被1个或多个不相交的有向环覆盖.这个值就是 所有这些有向环的权值和. 要求该值越小越好. SOL: 本来还想ta ...

  4. HDU 5067 (状态压缩DP+TSP)

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5067 题目大意:蓝翔挖掘机挖石子.把地图上所有石子都运回起点,问最少耗时. 解题思路: 首先得YY出 ...

  5. Redis错误配置详解

    在使用Redis做缓存时,应用往往能得到非常高的性能.然而,如果配置不当,你将遇到很多令人头疼的问题,比如复制缓冲区限制.复制超时等. Redis提供了许多提高和维护高效内存数据库使用的工具.在无需额 ...

  6. ARC指南1 - strong和weak指针

      一.简介 ARC是自iOS 5之后增加的新特性,完全消除了手动管理内存的烦琐,编译器会自动在适当的地方插入适当的retain.release.autorelease语句.你不再需要担心内存管理,因 ...

  7. hdu City Game

    做这题之前建议做一下hdu1506题,两道题是极度相似的题,不同的是这个要处理的是m行,所以可以用一个dp[][]数组存储矩形的高度,之后就变成hdu1506了. 例如测试样例: 0 1 1 1 1 ...

  8. [转]ASP.NET中的forms验证

    本文转自:http://www.cnblogs.com/fengzheng126/archive/2012/04/06/2435513.html ASP.NET的安全认证:Windows验证 (默认) ...

  9. HTML&CSS----练习做网页

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. 【液晶模块系列基础视频】5.3.X-GUI字体驱动3

    ============================= 技术论坛:http://www.eeschool.org 博客地址:http://xiaomagee.cnblogs.com 官方网店:ht ...