1、首先通过vertical-align:middle实现现图片与文字水平对齐，需要区分html是行内元素，还是块状元素，实现img、p及div水平居中对齐，则只需要在img的css中的vertical-align：middle；及将p和div（display：inline-block）转化为行内元素。
2、实现img、span水平居中对齐，由于这两者都是行内元素。
3、则只需要在img的css中的vertical-align：middle；span标签什么都不需要添加。
4、通过flex布局实现图片与文字水平对齐，只需要在父级元素中css添加。
5、子级元素则不需要像上面那样添加vertical-align：middle，这样就可以了。
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<style>标签中，输入css代码：img {position: absolutebottom: 80pxz-index: -1}。
3、浏览器运行index.html页面，此时实现了背景图片距离底部80px大小。
因为浏览器并不知道您footer的宽度和高度的比，就如同用一张背景图想让body标签 背景 自适应 整个屏幕一样不可能。只有定义footer的宽度100% 并且 position为fixed 才行的。
background-size: 100% 100%背景充满
cover: 缩放图像的最小值，其宽度和高度都能放入内容区域 【用这个】
contain：缩放图像的最大值，其宽度和高度都能放入内容区域
