<!-- 说白了就一个知识点：
同一行中前面有一张比较大的图片，且需要单行文字居中，分析： 正常情况，后面的文字肯定是和图片底边齐平，要让文字排列在图片中间：解决办法： 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>