单个未知大小图片在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. POJ1797 Heavy Transportation(SPFA)

    题目要求1到n点的最大容量的增广路. 听说是最短路求的,然后乱搞就A了.. 大概能从Bellman-Ford的思想,dk[u]表示从源点出发经过最多k条边到达u点的最短路,上理解正确性. #inclu ...

  2. python 代码片段7

    #coding=utf-8 #列表 book=['python','development',8] book.append(2008) print book book.insert(1,'web') ...

  3. javascript继承扩展类方法实现

    javascript没有原生的继承语法,这确实很让人困惑,但是广大人民群从的智慧是无穷的.最近呢,正尝到一点从源码中学习的甜头,不分享一下实在难以平复激动的心情.前不久改造视频播放插件的时候,找到了v ...

  4. win8 中实现断点续传

    1) Resume method does resume on cases where resume is possible. Meaning if the server accepts range- ...

  5. TYVJ P1081 最近距离 Label:这不是分治!!!

    描述    在一块地上,有着n(1<=n<=2000) 头牛,输入n,再分别输入这n头牛的坐标(x,y) (1<=x<=100000,1<=y<=100000),如 ...

  6. 【BZOJ】1082: [SCOI2005]栅栏(二分+dfs)

    http://www.lydsy.com/JudgeOnline/problem.php?id=1082 题意:n个给出木板,m个给出木板.可以将那m个木板锯成泥想要的长度.问最大能锯成多少个给出的n ...

  7. RSA密钥的生成与配置

    openssl下载地址http://dldx.csdn.net/fd.php?i=20313208579480&s=ac2e809e168f7d5b8bf1515d3d6b1aa4,或者官方下 ...

  8. CentoS 下安装gitlab

    curl https://raw.github.com/mattias-ohlsson/gitlab-installer/master/gitlab-install-el6.sh | bash 报错 ...

  9. jsp 将html字符串输出html标签

    第一种: <% out.println("<table><tr><td></td></tr></table>&q ...

  10. Apache Commons CLI 简介

    CLI 命令代码实现 命令行程序处理流程相对比较简单,主要流程为设定命令行参数 -> 解析输入参数 -> 使用输入的数据进行逻辑处理CLI 定义阶段 每一条命令行都必须定义一组参数,它们被 ...