单行文字居中

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

转载于:https://www.cnblogs.com/Knowledge-is-infinite/p/11095916.html

评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符 “速评一下”
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页