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 相关文章推荐
通过event对象的fromElement属性解决热区设置主实体的一个bug
Dec 22 Javascript
jquery 学习之一 对象访问
Nov 23 Javascript
jQuery1.6 使用方法二
Nov 23 Javascript
jquery获取选中的文本和值的方法
Jul 08 Javascript
jQuery中append()方法用法实例
Dec 25 Javascript
JavaScript数组迭代器实例分析
Jun 09 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
Sep 08 Javascript
JS实现鼠标滑过显示边框的菜单效果
Sep 21 Javascript
浅谈Node.js:理解stream
Dec 08 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
Aug 09 Javascript
jquery实现轮播图特效
Apr 12 jQuery
解决VUEX的mapState/...mapState等取值问题
Jul 24 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强制文件下载而非在浏览器打开的自定义函数分享
2014/05/08 PHP
常见php数据文件缓存类汇总
2014/12/05 PHP
PHP截取指定图片大小的方法
2014/12/10 PHP
php自定义扩展名获取函数示例
2016/12/12 PHP
setTimeout和setInterval的深入理解
2013/11/08 Javascript
用C/C++来实现 Node.js 的模块(一)
2014/09/24 Javascript
node.js中的socket.io的广播消息
2014/12/15 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
2015/09/20 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
2017/07/12 Javascript
vue 组件的封装之基于axios的ajax请求方法
2018/08/11 Javascript
浅析vue插槽和作用域插槽的理解
2019/04/22 Javascript
Vue动态生成表格的行和列
2019/07/18 Javascript
websocket4.0+typescript 实现热更新的方法
2019/08/14 Javascript
微信小程序如何实现五星评价功能
2019/10/15 Javascript
webpack 动态批量加载文件的实现方法
2020/03/19 Javascript
详解JavaScript中new操作符的解析和实现
2020/09/04 Javascript
vue实现顶部菜单栏
2020/11/08 Javascript
Python之web模板应用
2017/12/26 Python
Python中__slots__属性介绍与基本使用方法
2018/09/05 Python
Flask-WTF表单的使用方法
2019/07/12 Python
django 做 migrate 时 表已存在的处理方法
2019/08/31 Python
Python从文件中读取指定的行以及在文件指定位置写入
2019/09/06 Python
python中设置超时跳过,超时退出的方式
2019/12/13 Python
python 的numpy库中的mean()函数用法介绍
2020/03/03 Python
HTML5混合开发二维码扫描以及调用本地摄像头
2017/12/27 HTML / CSS
美国网上花店:JustFlowers
2017/02/12 全球购物
C#如何调用Windows程序打开一个文档
2014/12/26 面试题
Java语言的优势
2015/01/10 面试题
文秘大学生求职信
2014/02/25 职场文书
可口可乐广告词
2014/03/20 职场文书
2015年学校管理工作总结
2015/07/20 职场文书
golang switch语句的灵活写法介绍
2021/05/06 Golang
用python实现监控视频人数统计
2021/05/21 Python
详解缓存穿透击穿雪崩解决方案
2021/05/28 Redis
Python+Selenium实现抖音、快手、B站、小红书、微视、百度好看视频、西瓜视频、微信视频号、搜狐视频、一点号、大风号、趣头条等短视频自动发布
2022/04/13 Python
html网页引入svg图片的4种方式
2022/08/05 HTML / CSS