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 版本]
Mar 20 Javascript
js停止输出代码
Jul 20 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
May 28 Javascript
js封装可使用的构造函数继承用法分析
Jan 28 Javascript
js图片卷帘门导航菜单特效代码分享
Sep 10 Javascript
web前端开发upload上传头像js示例代码
Oct 22 Javascript
jQuery Easyui datagrid editor为combobox时指定数据源实例
Dec 19 Javascript
浅谈jQuery操作类数组的工具方法
Dec 23 Javascript
一个炫酷的Bootstrap导航菜单
Dec 28 Javascript
详解javascript中的babel到底是什么
Jun 21 Javascript
js通过循环多张图片实现动画效果
Dec 19 Javascript
在vue中实现echarts随窗体变化
Jul 27 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
win7 64位系统 配置php最新版开发环境(php+Apache+mysql)
2014/08/15 PHP
php字符串过滤strip_tags()函数用法实例分析
2019/06/24 PHP
js 浏览器事件介绍
2012/03/30 Javascript
JS点击链接后慢慢展开隐藏着图片的方法
2015/02/17 Javascript
JS获取表格内指定单元格html内容的方法
2015/03/31 Javascript
js实现图片放大和拖拽特效代码分享
2015/09/05 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
2015/11/15 Javascript
浅谈JS使用[ ]来访问对象属性
2016/09/21 Javascript
Angularjs单选改为多选的开发过程及问题解析
2017/02/17 Javascript
浅谈vue+webpack项目调试方法步骤
2017/09/11 Javascript
面包屑导航详解
2017/12/07 Javascript
详解JSON Web Token 入门教程
2018/07/30 Javascript
小程序实现新用户判断并跳转激活的方法
2019/05/20 Javascript
Python实现字典的key和values的交换
2015/08/04 Python
python如何在终端里面显示一张图片
2016/08/17 Python
Python读取和处理文件后缀为.sqlite的数据文件(实例讲解)
2017/06/27 Python
python2.6.6如何升级到python2.7.14
2018/04/08 Python
python生成lmdb格式的文件实例
2018/11/08 Python
python中类的属性和方法介绍
2018/11/27 Python
python lxml中etree的简单应用
2019/05/10 Python
在vscode中配置python环境过程解析
2019/09/28 Python
Python数组并集交集补集代码实例
2020/02/18 Python
五个2015 年最佳HTML5 框架
2015/11/11 HTML / CSS
使用HTML5进行SVG矢量图形绘制的入门教程
2016/02/19 HTML / CSS
巴西最好的男鞋:Rafarillo
2018/05/25 全球购物
美国宠物美容和宠物用品购物网站:Cherrybrook
2018/12/07 全球购物
大学四年个人自我小结
2014/03/05 职场文书
产品质量承诺范本
2014/03/31 职场文书
社区戒毒工作方案
2014/06/04 职场文书
公司应聘求职信
2014/06/21 职场文书
应届生找工作求职信
2014/06/24 职场文书
代收款委托书范本
2014/10/01 职场文书
鲁冰花观后感
2015/06/10 职场文书
大学班长竞选稿
2015/11/20 职场文书
我们认为中短波广播场强仪的最佳组合
2022/04/05 无线电
基于redis+lua进行限流的方法
2022/07/23 Redis