一：图片文字布局的解决方案
1，图片文字一行居中
方法一：采用img方式
<img>一掷千金，**为您轻松备战购物节<img>
css: img{vertical-align: middle;}
备注：vertical-align 只对行内元素有效，对块级元素无效。
思考：设置 img 的vertical-align:middle 可以使旁边的文字上下居中
方法二：采用背景图的方式
<div class="test">一掷千金，**为您轻松备战购物节</div>
background: url(../../images/landingpage/2017NovemberActivity/img1.png) left no-repeat;
width: 203px;
padding-left: 66px;
如果是左边的图片就left 如果是右边的图片就right
background: url(../../images/landingpage/2017NovemberActivity/img1.png) right no-repeat;
width: 203px;
padding-right: 66px;
方法三：采用两个div float的方式
<div class="test1"></div>
<div class="test2">一掷千金，合拍为您轻松备战购物节</div>
.test1{
background: url(../../images/landingpage/2017NovemberActivity/img1.png) center no-repeat;
width: 66px;
height: 50px;
display: inline-block;
float: left;
}
.test2{
float: left;
height: 50px;
line-height: 50px;
}
二：关于vertical-align的解析
1，关于vertical-align 语法属性详解
（1）vertical-align属性的具体定义列表如下：
语法： vertical-align : baseline | sub | super | top | text- top | middle | bottom | text-bottom | <百分比> | <长度> | inherit
说明： 设置元素内容的垂直对齐方式
值： baseline：基线对齐；sub：下标；super：上标；top：顶端对齐；text-top：与文本的顶端对齐；middle：中部对齐；bottom：底端对齐；text-bottom：文本的底端对齐；
百分比和长度：CSS2，可为负数。
初始值： baseline
继承性： 不继承
适用于： 行内元素和单元格（table-cell）元素
媒体： 视觉
计算值： 百分比和长度值为绝对长度；其他同指定值
此处需要特别注意的是：垂直对齐属性只对行内元素有效。
（2）预备知识
了解baseline top middle bottom的一般结构图
当然，大家不要误会了，在实际渲染中，line box的这几条线并非等分的，要视具体情况而定，毕竟vertical-align还会受line-height的影响。
举个实际例子，下面是我在ps上面画图的，可能不太清晰
最上面的虚线是top line,最下面的是bottom line，文字的顶部和底部分别是text-top text-bottom,而middle在baseline的上面一点。
baseline，所谓基线，是指小写x的底部所在的那条水平线位置，形象点，你在ps里面写文字时出现的那条线即是（可以试试，看下图）
middle，顾名思义就是中间线，那什么是中间线，准确定义是这样的：中线位于基线的上方，与基线的距离为小写字母x高度（即ex）的一半。而ex同字体尺寸相关，大部分浏览器认为1ex = 0.5em，因此会将基线以上四分之一em处作为中线来对齐。
注意：同在行高显示上的差别一样，在中间对齐上，各浏览器之间也稍有些差异。
（3）vertical-align属性值例子如下：
- 基线对齐（vertical-align : baseline）
基线对齐（vertical-align : baseline）使元素的基线同父元素的基线对齐
先看例子：
<div class="test">
<img src="./Img/actives/2017NovemberActivity/bag1.png">
xxx:vertical-align啦啦啦,大奖快来砸文文！
</div>
div{
text-align: center;
border: 1px dashed #fff;
margin: 50px;
}
图1
其中：白色虚线框是父容器，里面包含一张图片，一行文字，默认基线对齐
可以看到：图片是与基线对齐的，也就是小写字母x的底部所在的水平线。
思考一：为啥图片和文字下方还有一段空白呢？后面将会解释，可以先思考一下。
为了方便比较，我给文字加了一个span标签，并且加了一个背景，方便大家比较，如下图
代码如下：
<div class="test">
<img src="./Img/actives/2017NovemberActivity/bag1.png" ">
<span style="background: orange;">xxx:vertical-align啦啦啦,大奖快来砸文文！</span>
</div>
img{
vertical-align: baseline;
}
- 顶端对齐（vertical-align : top）
顶端对齐（vertical-align : top）是将元素的行内框的顶端与行框的顶端对齐
图2
思考二：为啥我们设置了img的属性，文字也跟着跑上去了呢？
- 文本顶端对齐（vertical-align : text-top）
文本顶端对齐（vertical-align : text-top）是将元素行内框的顶端同文本行的顶线对齐
图3
思考三：text-top为啥表现跟top一样呢？什么时候不一样呢？
- 底端对齐（vertical-align : bottom）
底端对齐（vertical-align : bottom）与顶端对齐（vertical-align : top）相反
图4
- 文本底端对齐（vertical-align : text-bottom）
文本底端对齐（vertical-align : text-bottom）与文本顶端对齐（vertical-align : text-top）相反
图5
- 中间对齐（vertical-align : middle）
中间对齐（vertical-align : middle）通常使用在图片上，将图片的垂直方向的中线与文本行的中线对齐
图6
思考四：我们设置的是img居中，为啥看到的效果是文字跑到图片的居中了呢？图片的中线究竟与文字哪个水平位置平行呢？
7，上标和下标
上标（vertical-align:super）使元素的基线（替换元素的底端）相对于父元素的基线升高，下标（vertical-align:sub）使元素的基线降低
vertical-align:super图如下
图7
vertical-align:sub图如下
图8
三：关于上述问题的答案
首先，看第一个问题：为啥图片和文字下方还有一段空白呢？
仔细检查，我们并没有设置padding 或者其他属性啊，其实，这个是由于vertical-align 和line-height一起影响的。对于内联元素，这两个属性是无处不在的，尽管你没有使用它。
从图1我们可以看到，vertical-align:baseline的对齐是正确的，我们知道，baseline是小写字母x的底部，图片确实和x的底部对齐，那么，我们就知道问题的原因了。不管是图片还是文字实际上的占用空间不是我们看到的大小，还有一部分我们看不到的虚拟区域，而这部分虚拟区域是行高影响的，匿名文本本身就是有行高的，继承父级元素设置的行高，默认为normal(即font-size的1.2倍)，所以X的底边距离行框有一段距离，这段距离就是图像留出的空隙。
大家会想，如果想去掉这个空白呢，很简单，方法如下：
一是可以改变vertical-align的值
二是让vertical-align失效，那么可以设置img为block，或者float等
三是设置父元素div 的line-height 为0
四是设置font-size为0
这些方法是没有考虑文字和图片对齐的话，仅仅是考虑去掉img标签下面的空白地方
问题二：为啥我们设置了img的属性，文字也跟着跑上去了呢？
这个问题与问题四的本质一样的。很简单：其实我们看到的现象不是本质，本质是图片的top line与父容器的top对齐，这个时候图片的top就与文字的top在一条线上，所以是图片移动了，而不是文字移动了。为了验证，可以做如下实验：
给div加一个line-height:300px
样式如下：
div{line-height: 300px;}
img{vertical-align: baseline;}
然后我们变化一下img的verical-align属性值
vertical-align: bottom;
vertical-align: middle;
vertical-align: top;
通过实验，大家可以发现，变化的是图片的位置，旁边的文字并没有变化，大家可以试试！
思考：为什么我们设置line-height 而不是设置Height，如果是设置高度会有问题？line-height与height有啥本质区别？如果上面我们设置line-height的高度比较小呢？
直接上图
div{line-height: 0;}
img{vertical-align: top;}
原因：因为字符实际占据的高度是由行高决定的，当行高变成0的时候，字符占据的高度也是0，此时，高度的起始位置就变成了字符content area的垂直中心位置，于是，文字就一半落在看看2的外面了。
问题三：text-top为啥表现跟top一样呢？什么时候不一样呢？
直接说答案吧：当设置了line-height的时候就不一样啦
这个div设置的是line-height:300px
图片就挨着div的顶部对齐了
下面再看text-top
这个时候图片就与文字的top对齐了
问题四：我们设置的是img居中，为啥看到的效果是文字跑到图片的居中了呢？图片的中线究竟与文字哪个水平位置平行呢？
第一问已经解释了，那么图片中中线与文字哪个位置水平平行呢？根据middle的解析，应该是在字母x的中心位置，即基线上面0.5ex处，如果有Line-height的情况下，这里也不是绝对居中的，至于为什么，大家可以下去查查，这里不详述了！
三、inline-box布局的三个重要属性：line-height、font-size、vertical-align
从上面的例子可以看出，这几个属性值任何一个改变都可能改变UI的布局情况，那么这三个的具体关系是啥呢？
先看这张图。了解几个基本概念。
内容区：对于行内非替换元素或匿名文本某一部分，font-size确定了内容区的高度
行内框：内容区加上行间距等于行内框。如果一个行内非替换元素的font-size为15px，line-height为21px，则相差6px。用户代理将这6像素一分为二，将其一半分别应用到内容区的顶部和底部，这就得到了行内框
当line-height小于font-size时，行内框实际上小于内容区
行框
行框定义为行中最高行内框的顶端到最低行内框底端之间的距离，而且各行框的顶端挨着上一行行框的底端
line-height行高是指文本行基线之间的距离
行高line-height实际上只影响行内元素和其他行内内容，而不会直接影响块级元素，也可以为一个块级元素设置line-height，但这个值只是应用到块级元素的内联内容时才会有影响。在应用到块级元素时，line-height定义了元素文本基线之间的最小距离，即最小行高。
vertical-align的百分数值是相对于元素的line-height来计算的。对于垂直对齐来说，图像本身的高度无关紧要，关键是line-height的值
