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 相关文章推荐
javascript 播放器 控制
Jan 22 Javascript
js修改input的type属性及浏览器兼容问题探讨与解决
Jan 23 Javascript
js判断鼠标位置是否在某个div中的方法
Feb 26 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
Oct 27 Javascript
图片加载完成再执行事件的实例
Nov 16 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
Jan 20 Javascript
Vue的土著指令和自定义指令实例详解
Feb 04 Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
Mar 05 Javascript
ionic grid(栅格)九宫格制作详解
Jun 30 Javascript
JavaScript的级联函数用法简单示例【链式调用】
Mar 26 Javascript
layui form.render('select', 'test2') 更新渲染的方法
Sep 27 Javascript
Vue3.0的优化总结
Oct 16 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 将excel导入mysql
2009/11/09 PHP
php抽象类用法实例分析
2015/07/07 PHP
PHP7导出Excel报ERR_EMPTY_RESPONSE解决方法
2019/04/16 PHP
Javascript SHA-1:Secure Hash Algorithm
2006/12/20 Javascript
地震发生中逃生十大法则
2008/05/12 Javascript
jQuery生成asp.net服务器控件的代码
2010/02/04 Javascript
基于jQuery实现图片的前进与后退功能
2013/04/24 Javascript
js call方法详细介绍(js 的继承)
2013/11/18 Javascript
javascript动态向网页中添加表格实现代码
2014/02/19 Javascript
JS中getYear()和getFullYear()区别分析
2014/07/04 Javascript
JavaScript多线程详解
2015/08/12 Javascript
深入理解ECMAScript的几个关键语句
2016/06/01 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
2016/10/09 Javascript
用jQuery旋转插件jqueryrotate制作转盘抽奖
2017/02/10 Javascript
Vue Router的懒加载路径的解决方法
2018/06/21 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
2018/09/26 Javascript
jquery分页优化操作实例分析
2019/08/23 jQuery
angularjs模态框的使用代码实例
2019/12/20 Javascript
linux 下实现python多版本安装实践
2014/11/18 Python
使用Python编写Linux系统守护进程实例
2015/02/03 Python
在Python中使用HTML模版的教程
2015/04/29 Python
Python中遇到的小问题及解决方法汇总
2017/01/11 Python
Python实现简易版的Web服务器(推荐)
2018/01/29 Python
Django基于ORM操作数据库的方法详解
2018/03/27 Python
PyTorch CNN实战之MNIST手写数字识别示例
2018/05/29 Python
使用HTML5 Canvas API控制字体的显示与渲染的方法
2016/03/24 HTML / CSS
印度服装购物网站:Limeroad
2018/09/26 全球购物
Exoticca英国:以最优惠的价格提供豪华异国情调旅行
2018/10/18 全球购物
英国排名第一的LED灯泡网站:LED Bulbs
2019/09/03 全球购物
食品流通安全承诺书
2014/05/22 职场文书
人事代理委托书
2014/09/27 职场文书
初中思想品德教学反思
2016/02/24 职场文书
导游词之铁岭象牙山
2019/12/06 职场文书
Java elasticsearch安装以及部署教程
2021/06/28 Java/Android
基于Python编写一个监控CPU的应用系统
2022/06/25 Python
Mybatis 一级缓存和二级缓存原理区别
2022/09/23 Java/Android