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 window.opener的用法分析
Apr 07 Javascript
javascript题目,重写函数让其无限相加
Feb 15 Javascript
JavaScript中判断整数的多种方法总结
Nov 08 Javascript
如何改进javascript代码的性能
Apr 02 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
Jun 09 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
Aug 19 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
Nov 17 Javascript
Bootstrap 轮播(Carousel)插件
Dec 26 Javascript
JS中的phototype详解
Feb 04 Javascript
Vue学习之路之登录注册实例代码
Jul 06 Javascript
Vue-CLI3.x 设置反向代理的方法
Dec 06 Javascript
UEditor 自定义图片视频尺寸校验功能的实现代码
Oct 20 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数据库操作面向对象的优点
2006/10/09 PHP
PHP curl_setopt()函数实例代码与参数分析
2011/06/02 PHP
PHP中使用crypt()实现用户身份验证的代码
2012/09/05 PHP
php实现邮件发送并带有附件
2014/01/24 PHP
PHP错误和异常处理功能模块示例
2016/11/12 PHP
基于Codeigniter框架实现的student信息系统站点动态发布功能详解
2017/03/23 PHP
IE和firefox浏览器的event事件兼容性汇总
2009/12/06 Javascript
jquery 可拖拽的窗体控件实现代码
2010/03/21 Javascript
中止javascript执行的方法
2014/02/14 Javascript
jquery live()调用不存在的解决方法
2014/02/26 Javascript
将数字转换成大写的人民币表达式的js函数
2014/09/21 Javascript
jQuery寻找n以内完全数的方法
2015/06/24 Javascript
在for循环中length值是否需要缓存
2015/07/27 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
2015/07/29 Javascript
vue2.0构建单页应用最佳实战
2017/04/01 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
2017/04/20 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
2017/07/27 Javascript
JavaScript获取页面元素的常用方法详解
2019/09/28 Javascript
在nuxt中使用路由重定向的实例
2020/11/06 Javascript
[02:38]2018年度DOTA2最佳劣单位选手-完美盛典
2018/12/17 DOTA
Python实现测试磁盘性能的方法
2015/03/12 Python
在Python中使用HTML模版的教程
2015/04/29 Python
python清理子进程机制剖析
2017/11/23 Python
Python3字符串encode与decode的讲解
2019/04/02 Python
Python实现堡垒机模式下远程命令执行操作示例
2019/05/09 Python
python对一个数向上取整的实例方法
2020/06/18 Python
使用anaconda安装pytorch的实现步骤
2020/09/03 Python
请写一个C函数,若处理器是Big_endian的,则返回0;若是Little_endian的,则返回1
2015/07/16 面试题
中青班党性分析材料
2014/02/16 职场文书
采购助理岗位职责
2014/02/16 职场文书
早读课迟到检讨书
2014/09/25 职场文书
迟到检讨书范文
2015/01/27 职场文书
应急管理工作总结2015
2015/05/04 职场文书
幼儿园开学温馨提示
2015/07/15 职场文书
毕业典礼致辞
2015/07/29 职场文书
mysql备份策略的实现(全量备份+增量备份)
2021/07/07 MySQL