JS实现图片垂直居中显示小结


Posted in Javascript onDecember 13, 2016

第1种,居中效果

<div class="box">
<div class="center">居中效果</div>
</div>
/*第1种,垂直居中效果*/
.box{
    width: 200px;height: 200px;border: 1px solid #ccc;
    position: relative;
 }
.center{
   width: 100px;height: 100px;background: gray;
   margin: auto;position: absolute;top: 0;left: 0;bottom: 0;right: 0;
  }

第2种 图片居中

<div class="box2">
<img class="center2" src="yz_p5.jpeg" alt=""/>
<span class="block"></span>
</div>
/*第2种 图片垂直居中*/
/* span是辅助元素 vertical-align这个属性的特点,它是相对兄弟级行高(line-height)来定位*/

.box2{
  width: 350px;height: 350px;border: 1px solid #F22727;
  text-align: center;
}
.center2{ vertical-align: middle;}
.block{ line-height: 350px;}/*跟父级一样高*/

第3种,居中效果 父元素使用display: table; 子元素display: table-cell;

<div class="box3">
<span class="center3"><img src="yz_p5.jpeg" alt=""/></span>
</div>
/*第3种,居中效果*/
.box3{
  width: 350px;height: 350px;border: 1px solid #F22727;display: table;text-align: center;
}
.center3{
  display: table-cell;vertical-align: middle;
}

 第4种,居中效果

<div class="box4">
<img class="center4" src="yz_p5.jpeg" alt=""/>
</div>
/*第4种,居中效果 根据父元素来计算*/
.box4{
  width:300px;height: 300px;border: 1px solid #F22727;
}
.center4{
  width: 200px;height: 200px;position: relative;left: 16%;top: 19%;
}

以上所述是小编给大家介绍的JS实现图片垂直居中显示小结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery $.ajax各个事件执行顺序
Oct 15 Javascript
JS获取页面窗口大小的代码解读
Dec 01 Javascript
JS判断两个时间大小的示例代码
Jan 28 Javascript
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
May 11 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
Jun 16 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
Dec 10 Javascript
javascript实现input file上传图片预览效果
Dec 31 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
Jul 27 Javascript
原生node.js案例--前后台交互
Feb 20 Javascript
vue登录注册实例详解
Sep 14 Javascript
vue实现二级导航栏效果
Oct 19 Javascript
node.js中npm包管理工具用法分析
Feb 14 Javascript
Javascript this 函数深入详解
Dec 13 #Javascript
JS实现动画兼容性的transition和transform实例分析
Dec 13 #Javascript
简单实现js浮动框
Dec 13 #Javascript
javascript中this关键字详解
Dec 12 #Javascript
深入理解javascript函数参数与闭包
Dec 12 #Javascript
smartupload实现文件上传时获取表单数据(推荐)
Dec 12 #Javascript
Javascript中call,apply,bind方法的详解与总结
Dec 12 #Javascript
You might like
PHP 用数组降低程序的时间复杂度
2009/12/04 PHP
PHP学习笔记之三 数据库基本操作
2011/01/17 PHP
自己写的php中文截取函数mb_strlen和mb_substr
2015/02/09 PHP
jQuery中 noConflict() 方法使用
2013/04/25 Javascript
jQuery获取Radio,CheckBox选择的Value值(示例代码)
2013/12/12 Javascript
判断客户浏览器是否支持cookie的示例代码
2013/12/23 Javascript
node.js中watch机制详解
2014/11/17 Javascript
jQuery学习笔记之2个小技巧
2015/01/19 Javascript
嵌入式iframe子页面与父页面js通信的方法
2015/01/20 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
2015/04/16 Javascript
JS实现超简单的仿QQ折叠菜单效果
2015/09/21 Javascript
浅谈JavaScript中数组的增删改查
2016/06/20 Javascript
jQuery新窗口打开外链接
2016/07/21 Javascript
JS扩展类,克隆对象与混合类实例分析
2016/11/26 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
2017/03/08 Javascript
Node.js 实现简单的接口服务器的实例代码
2017/05/23 Javascript
vue.js 获取select中的value实例
2018/03/01 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
2019/06/26 Javascript
javascript如何实现create方法
2019/11/04 Javascript
在Python的Django框架中创建语言文件
2015/07/27 Python
Django-xadmin+rule对象级权限的实现方式
2020/03/30 Python
浅谈keras通过model.fit_generator训练模型(节省内存)
2020/06/17 Python
Nike英国官网:Nike.com (UK)
2017/02/13 全球购物
FC-Moto美国:欧洲最大的摩托车服装和头盔商店之一
2019/08/24 全球购物
初一科学教学反思
2014/01/27 职场文书
《学棋》教后反思
2014/04/14 职场文书
敬老模范事迹
2014/05/21 职场文书
十一国庆节“向国旗敬礼”主题班会活动方案
2014/09/27 职场文书
招商引资工作汇报材料
2014/10/28 职场文书
学生党员检讨书范文
2014/12/27 职场文书
校长新学期致辞
2015/07/30 职场文书
高中化学教学反思
2016/02/22 职场文书
2016年公共机构节能宣传周活动总结
2016/04/05 职场文书
pytorch 实现变分自动编码器的操作
2021/05/24 Python
java设计模式--原型模式详解
2021/07/21 Java/Android
使用Python通过企业微信应用给企业成员发消息
2022/04/18 Python