单个未知大小图片在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. BZOJ3742 : Painting

    设f[i][j]表示以i为根的子树,i与父亲之间的边染成j的最小代价 DP的过程中转移时相当于求一个最小权匹配,用费用流即可 感觉复杂度飞起来了… #include<cstdio> con ...

  2. TextBlock 格式化内容

    Text="{Binding ContentName,StringFormat=分享好书\{0\}}"

  3. CentOS 拷贝mysql数据库到新的硬盘报错了

    服务器硬盘满了,加了一块,在目录 下新建了 mkdir /mysql cp -r /var/lib/mysql/* /mysql chown -R mysql:root /mysql 更改/etc/m ...

  4. Nginx在Windows系统和Linux系统下的重启

    一.Windows系统下重启nginx 1.杀掉nginx进程 tskill nginx echo 已终止所有ginx进程      2.启动nginx cd f:\nginx-  nginx.exe ...

  5. iOS开发中使用[[UIApplication sharedApplication] openURL:]加载其它应用

        iOS 应用程序之间(1)  在iOS开发中,经常需要调用其它App,如拨打电话.发送邮件等.UIApplication:openURL:方法是实现这一目的的最简单方法,该方法一般通过提供的u ...

  6. 在cmd下输入/g无效

    如图: 原来一:斜杠得是\ 二:命令和它之间没空格.这个符号和分号的使用是一样的.

  7. [转].net 缩略图方法

    本文转自:http://www.cnblogs.com/promic/archive/2010/04/21/1717190.html private static string strConnect ...

  8. IOS第四天(3:数组的排序和乱序)

    数组的升序和降序 - (void)sortWith:(NSArray *)array { // 排序 array = [array sortedArrayUsingComparator:^NSComp ...

  9. 移动端 :meta标签1万个作用

    meta标签 <meta charset="utf-8"> <meta http-equiv="Content-Type" content=& ...

  10. ThinkPHP 3.2 版本升级了哪些内容

    ThinkPHP 3.2 版本升级了哪些内容           ThinkPHP 3.2发布了挺长时间了,这里也总结下这次ThinkPHP 3.2到底发生了哪些变化,方便程序员们进行开发. 前言 T ...