单行文字居中
<!-- 说白了就一个知识点：
同一行中前面有一张比较大的图片，且需要单行文字居中，分析：
正常情况，后面的文字肯定是和图片底边齐平，要让文字排列在图片中间：解决办法：
1，设置好图片，并且把图片向左浮动：float:left; 这样文字也会上移，和图片顶边齐平
2，设置父元素为行内元素： display:inline;
3，设置行高等于当前父元素的高度：line-height=height 即可现实文字与图片中线齐平 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.bd > div{
margin-top: 30px;
}
.fl{
float: left;
}
.clearfix:after{
display: block;
content: "";
clear: both;
}
/* .container:first-child 这样写是错误的，任意父元素下面的第一个.container子元素
这样差别很大，不该放的错。这是对后代选择器的不熟悉。
.container > span:first-child 表示：父元素.container下面第一个span元素进行设置样式
*/
.container > span:first-child{
display: inline-block;
background: #f0f url('../img/logo.png') center center scroll;
background-size: cover;
width: 85px;
height: 85px;
}
.logo{
display: inline-block;
/* center center表示图片显示中间 */
background: #f0f url('../img/logo.png') center center scroll;
background-size: cover;/* 表示图片全部显示在区域内 详见background*/
width: 85px;
height: 85px;
}
.middle{
display: inline;
vertical-align: middle;
line-height: 85px;
}
</style>
</head>
<body>
<div class="bd">
<!-- clearfix 清楚浮动 -->
<div class="container clearfix">
<!--fl 这里是浮动的 -->
<span class="logo fl "></span><span>这里是浮动的，方框后面的文字是在顶边</span><span>|</span><span>客户服务</span>
</div>
<!-- 这里是没有浮动的 -->
<div>
<span class="logo"></span><span>这里是没有浮动，方框后面的文字在底边</span><span>|</span><span>客户服务</span>
</div>
</div>
<hr/>
<div class="bd">
<!-- clearfix 清楚浮动 -->
<div class="container clearfix">
<!--fl 这里是浮动的 -->
<span class="logo fl "></span>
<xxxxxx class="middle">
<span>这一行居中，必须单行，只要父元素变成行内元素，line-height=height </span><span>|</span><span>客户服务</span>
</xxxxxx>
</div>
<!-- 这里是没有浮动的 -->
<div>
<span class="logo"></span><span>这里是没有浮动，方框后面的文字在底边</span><span>|</span><span>客户服务</span>
</div>
</div>
</body>
</html>
