大小不固定的图片和多行文字的垂直水平居中
1. 单行文字
可能很多人都知道如何让单行文字垂直居中显示，就是使用line-height，将line-height值与外部标签盒子的高度值设置成一致就可以了
2. 多行文字
说白了就是把文字当图片处理。用一个span标签将所有的文字封装起来，设置文字与图片相同的display属性（inline-block属性），然后用处理图片垂直居中的方式处理文字的垂直居中，给外层容器添加table-cell和vertical属性即可
3. 透明gif图片+背景定位实现大小不定的图片垂直居中
方法的原理很简单，使用一个透明的gif图片做覆盖层，高宽拉伸至所需要的大小，然后给这个gif图片一个background-position:center center的属性。而background-image建议写在页面上，因为实际项目中，这肯定是个动态的URL地址，css文件似乎不支持动态URL地址
4. display:inline-block和文字大小控制居中
1.img外的标签需是a标签或span这类inline属性的标签，div标签也可以，只不过需要转成inline-block属性
2.此方法只需要两层标签即可，可谓代码超简洁，但是只适用于多图垂直居中对齐的情况。因为其对齐原理是相邻的图片居中对齐，如果只是一个图片，vertical-align:middle就只有与空格对齐了
5. 使用空白图片实现垂直对齐
一句话，将要显示的图片与一张透明的高度100%，宽度1像素的透明图片vertical-align:middle对齐
**其核心原理其实是将font-size设置得很大，目的是撑开IE下默认文字空间的高度，然后通过vertical-align:middle属性让图片与这个高高的空白空格空间垂直居中对齐；而这里将这个看不见的文字空间实例成一张透明的gif图片，高度可以轻松设置为外部标签的高度，然后通过vertical-align:middle对齐，就实现效果了，在各个浏览器下都是一样的表现，不需要担心什么兼容性的问题。而且代码很简单，很易懂，想出错都难！
相比图片而言，多了个display:inline-block; 但是会少一次链接请求。效果图和上面的一样的，完美的水平垂直居中。原理也与图片一样，相信很容易理解的
大小不固定的图片和多行文字的垂直水平居中相关推荐
- 大小不固定的图片、多行文字的水平垂直居中
想必写css的都知道如何让单行文字在高度固定的容器内垂直居中,但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢?本文将会告诉你如何实现多行文字的垂直居中显示. 关于图片垂直居中显示,想 ...
- HTML图片和多行文字并列显示
上课涉及到一点HTML编程,有的时候网页上有图片和多行文字并列显示的情况,类似下面的简历那样: 查阅了一些方法,才得以实现.记录在这里,以备后用,也方便后来人. 首先,可以采用无边框table实现图片 ...
- CSS的display:table-cell：多行文字的垂直居中水平居中
参考:https://blog.csdn.net/lishuai_it_trip/article/details/88411550?utm_medium=distribute.pc_relevant_ ...
- 数码相框(五、使用freetype库在LCD显示几行文字)
注:本人已购买韦东山第三期项目视频,内容来源<数码相框项目视频>,只用于学习记录,如有侵权,请联系删除. 1.在LCD显示几行文字 (1) 在LCD显示几行文字,我们分为两种显示方法: ① ...
- 大小不一样的图片随着盒子大小自适应
前提:vue+iview做后台管理系统 需求:页面一行有固定的4张卡片,每张卡片里有图片,图片是从后台系统中上传的,大小不固定,要卡片中的图片高度随着屏幕大小自适应 小屏幕效果: 大屏幕效果: 解决方 ...
- 计算机表格设置宽度,word表格大小调整固定单元格大小设置——想象力电脑应用...
在前面的课程中,我们讲解了创建表格(四种创建表格的方法)和表格的基本操作(选择表格.插入与删除行或列.删除单元格.删除整张表格以及合并与拆分单元格)的方法,这里,我们接着介绍表格大小的设置. 当我们创 ...
- Android 保持ImageVIew大小不变，让图片按比例拉伸
目录 结果总览 结论:保持图片宽高比总体有两种思路: 实践示例 效果图: 原理说明: 补充说明: 再次汇总 结果总览 全篇为个人理解终结,如有出入请参考官方文档 ImageVIew 按比例拉伸图片,前 ...
- HTML 如何让图片自动改变大小,CSS如何设置图片的大小
原标题:CSS如何设置图片的大小 图片是的基本构成元素,通过img元素的属性值可以调整图片在浏览器中的显示效果,如图片的边框.大小以及为图片设置透明效果等各种样式. 通过img元素的属性值可以调整图片 ...
- C#发现之旅 --- WinForm.NET中开发具有固定背景图片的可滚动控件
摘要 在本文章中笔者使用WinForm.NET2.0开发出一个具有固定背景图片的带滚动条的容器控件.点击下载本文章配套的演示程序 /Files/xdesigner/FixedBackground.zi ...
最新文章
- 网易云音乐消息队列改造之路
- eeglab教程系列(17)-DIPFIT对独立成分进行等价偶极子定位
- 自定义UISlider的样式和滑块
- rxjs里subscribe和tap的区别
- 浅析 Linux 初始化系统（系统服务管理和控制程序/init system） -- UpStart
- Spring Cloud构建微服务架构：服务容错保护（Hystrix服务降级）【Dalston版】
- 合泰单片机c语言halt指令,holtek单片机图文全面详解
- Java 算法 最大体积
- c语言矩阵乘法问题分析,c语言矩阵相乘
- 键盘定位板图纸_Alienware AW510K RGB矮轴机械键盘评测
- 解决nf_conntrack: table full, dropping packet
- 大数据分析：数字化企业转型的关键
- Recovering a NOARCHIVELOG Database with Incremental Backups
- 启动gazebo失败报错[gazebo-1] process has died [pid 10999, exit code 255
- pythonturtle写字_python用turtle写字
- 单线程+多路IO复用 Redis6多线程
- sanp 7 1200plc通信
- 腾讯云从业者资格认证考试模拟题1
- html简单留言板教程,JS实现简易留言板（节点操作）
- spss数据处理—数据输入