css图片设置垂直居中(CSS居中实例之大小不固定的图片居中方法)
类别:Web前端 浏览量:1941
时间:2022-03-28 22:21:33 css图片设置垂直居中
CSS居中实例之大小不固定的图片居中方法本文介绍了CSS居中实例之大小不固定的图片居中方法,分享给大家,具体如下:
1.利用table-cell实现垂直居中
<li class="box1"> [站外图片上传中……(5)] </li>
li{ width: 500px; height: 500px; background: #ccc; } .box1{ text-align:center; display: table-cell; vertical-align: middle; /* font-size: 118px; */ } img{ vertical-align: middle; }
利用父元素为display:table-cell类型实现垂直居中,table在ie8+的浏览器中自带的垂直居中的属性。
注意:img{vertical-align: middle;}只是为了消除display:inline-block类型的基线对齐问题。
2.多行文本的垂直居中方法
有时可能我们会遇到需要多行文本垂直居中的一些情况,但是做起来有时有些麻烦,需要我们换个思路去实现。
<li class="box3"> <span>你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据</span> </li>
li{ width: 500px; height: 500px; background: #ccc; } .box3{ display: table-cell; vertical-align: middle; } span{ display: inline-block; vertical-align: middle; }
将内部的文本用span标签(其他标签也可以)包裹起来,把span标签设为inline-block,然后当图片的垂直居中处理(ie8+)。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- css水平或者垂直居中的写法(深入理解CSS行高line-height与文本垂直居中的原理)
- css图片设置垂直居中(CSS居中实例之大小不固定的图片居中方法)
- 块级元素水平垂直居中
- css3伸缩布局及使用方法(利用CSS3的flexbox实现水平垂直居中与三列等高布局)
- div内容水平垂直居中的方法(不定宽高的文字在div中垂直居中实现方法)
- 让文字居中代码是多少(如何使定义了高度和宽度的< a >里的文字垂直居中实现代码)
- html怎么引入sass(利用CSS的Sass预处理器框架来制作居中效果)
- css垂直居中图解(全面总结使用CSS实现水平垂直居中效果的方法)
- css垂直居中
- 小程序canvas不显示(小程序canvas中文字设置居中锚点)
- css怎么让div整体居中(CSS实现DIV居中的三种方法)
- css怎么样让banner不动(CSS banner图响应式居中显示的方法)
- css文字图片垂直居中对齐(CSS设置文字图片垂直居中的方法总结)
- cssdiv垂直居中怎么设置(CSS设置DIV垂直居中的N种方法 兼容IE浏览器)
- css实现水平垂直居中的方式有哪些(css让容器水平垂直居中的7种方式)
- css如何让图片居中
- 2主力后腰缺阵 泰山队奇兵有望获重用,赛季0出场,迎来中超首秀(泰山队奇兵有望获重用)
- 三分71 生死战爆发 篮网旧将丁威迪今天成奇兵,助队赢球(三分71生死战爆发)
- 《红 雄安》系列广播剧第一集 水上奇兵雁翎队(雄安系列广播剧第一集)
- 小说 小伙穿越成刘备,用现代知识指挥作战,众谋士都看呆了(小伙穿越成刘备)
- 解析葡萄牙6-1瑞士 进攻多点开花,贡萨洛-拉莫斯一战成名(解析葡萄牙6-1瑞士)
- 这支 奇兵队 腕大 有范儿还各怀绝技,毒贩杀人犯见了都要仓皇而逃(这支奇兵队腕大)
热门推荐
- python爬虫出租屋(python爬虫租房信息在地图上显示的方法)
- html5怎么设置红色(详解HTML5如何使用可选样式表为网站或应用添加黑暗模式)
- SQLServer将数据导出为SQL脚本
- mysql记录binlog的方式(MySQL使用binlog日志做数据恢复的实现)
- php构成方法的关键字是(PHP中的self关键字详解)
- js页面跳转的几种代码
- php收集多个统计数据(PHP实现统计代码行数小工具)
- python爬虫爬取网页信息教程(python爬虫爬取微博评论案例详解)
- 云服务器最低配置可以吗(云服务器内存怎么选择?)
- python中什么是迭代器(一篇文章彻底搞懂Python中可迭代Iterable、迭代器Iterator与生成器Generator的概)