跨度元素中的图标和测试彼此下方

Question

如何使用 css 来创建在图标下方连续显示文字的图标？

我目前有这个：

<div class="icon-stats">
    <div class="video-stats-holder">
        <span class="icon-video-stat"></span><span class="video-stat-descr">12</span>
    </div>  
    <div class="playlist-stats-holder">     
       <span class="icon-playlist-stat"></span><span class="playlist-stat-descr" >5</span> 
    </div>                    
</div>

和我的 css:

.icon-stats {
    max-width: 160px;
    padding-top: 30px;
}

.video-stats-holder, .playlist-stats-holder {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.icon-video-stat, .icon-playlist-stat {
    padding: 5px;
    height: 64px;
    width: 64px;
}

.icon-video-stat {
    background: url('/css/icons/video-stats.png');
}

.icon-playlist-stat {
    background: url('/css/icons/playlist-stats.png');
}

上面的代码是基于的答案，但似乎并不完全适合我。图标和文本现在显示在一列中，彼此下方。我希望图标彼此相邻（文字居中位于下方）。

Answer 1

你可以给.icon-statsclass一个显示属性的flex display:flex

只需使用以下代码

更新您的 CSS

.icon-stats {
    max-width: 160px;
    padding-top: 30px;
    display: flex;
}

跨度元素中的图标和测试彼此下方

icon and test in span elements below each other

html

css

icons