css图片和文字的行居中

文字如果和图片在一行里,往往会出现图片比文字要高,即不在一行里。写法通常有如下两种:

<div class="box">
    <img src="https://xxx.com/xxx.jpg" class="head_image"/>
    <span>测试文本在此</span>
</div>
<div class="box">
    <img src="https://xxx.com/xxx.jpg" class="head_image"/>
    测试文本在此
</div>

解决这个问题两种办法。

一种是使用行高加垂直居中,即:

.head_image {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid white;
}
.box * {
    font-size: 28px;
    vertical-align: middle;
    line-height: 1.75em;
}

另一种是使用inline-flex,即:

.box {
    font-size: 28px;
    display: inline-flex;
    align-items: center;
}

 

发表于 2018年09月21日 19:56   评论:0   阅读:1680  



回到顶部

首页 | 关于我 | 关于本站 | 站内留言 | rss
python logo   django logo   tornado logo