html - 如何使用显示 :flex? 显示包含图像和文本的列表

Question

我有一个包含图像的列表(过滤器)，我试图在其下方写下每个类别的名称。问题是，我似乎无法将它们放在图像下方。我认为这与它们是 display: flex; 的事实有关，但如果我删除它，我会遇到其他问题。

HTML 标记是:

<li class="module" data-tab="tab-1">
<img class="filter-img" src="https://via.placeholder.com/60x60">
<span class="filter-text">Text</span>
</li>

还有 CSS:

.module {
    display: flex;
    align-items: center;
    height:60px;
    line-height:54px;
    text-align:center;
    background:#FFFFFF;
    color:#666666;
    text-transform: uppercase;
}
.filter-img{
  display:block;
}
.filter-text{
  display:block;
  font-size:0.7rem;
}

我怎样才能得到 <span class="filter-text">在<img class="filter-img">下面并且仍然可以点击？

这是一个 fiddle :https://jsfiddle.net/8s14am7v/

感谢您的任何建议!

Answer 1

将flex-direction: column添加到.module，它会对齐图像下方的文本

$( document ).on( "click", "ul#tabs li", function() {
			
			var tab_id = $(this).attr('data-tab');
	
			$('ul#tabs li').removeClass('current');
			$('.tab-content').removeClass('current');
	
			$(this).addClass('current');
			$("#"+tab_id).addClass('current');
			
		})

#categories-container {
    width:100%;
    height: 80px;
    overflow: hidden;
    font-size: 0.8rem;
	
	display: flex;
	top: 0px;
	
	position: sticky;
	position: -webkit-sticky;
	position: -moz-sticky;
	position: -ms-sticky;
	position: -o-sticky;

	z-index: 5000;
	
	background-color: #FFFFFF;
	border-bottom: 1px solid #f4f4f4;
	border-top: 1px solid #f4f4f4;
	
}
#tabs {
    height:70px;
    padding:0px;
    white-space:nowrap;
    overflow-x: scroll;
    overflow-y: hide;
	-webkit-overflow-scrolling:touch;
	padding: 0px;
	margin: 0px 20px;
	display: inline-flex;
}
.module:first-child {
	margin-right: 11px;
}
.module {
    display: flex;
    flex-direction: column;
    align-items: center;
    height:60px;
    line-height:54px;
    text-align:center;
    background:#FFFFFF;
    color:#666666;
	text-transform: uppercase;
}
.module.current {
   color:#424647;
   font-weight: 500;
}
.module + .module {
    /* margin-left:10px*/
    margin: 0px 11px;
}
.tab-content{
			display: none;
			background: #FFFFFF;
			padding: 0px;
			margin-top: 10px;
}
.tab-content.current{
			display: inherit;
}

.filter-img{
  display:block;
}
.filter-text{
  display:block;
  font-size:0.7rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="categories-container">

  <ul id="tabs">
  <li class="module" data-tab="tab-1"><img class="filter-img" src="https://via.placeholder.com/60x60"><span class="filter-text">Text</span></li>
  <li class="module" data-tab="tab-2"><img class="filter-img" src="https://via.placeholder.com/60x60"><span class="filter-text">Text</span></li>
  <li class="module" data-tab="tab-3"><img class="filter-img" src="https://via.placeholder.com/60x60"><span class="filter-text">Text</span></li>
  <li class="module current" data-tab="tab-4"><img class="filter-img" src="https://via.placeholder.com/60x60"><span class="filter-text">Text</span></li>
  <li class="module" data-tab="tab-5"><img class="filter-img" src="https://via.placeholder.com/60x60"><span class="filter-text">Text</span></li>
  <li class="module" data-tab="tab-6"><img class="filter-img" src="https://via.placeholder.com/60x60"><span class="filter-text">Text</span></li>
  </ul>
</div>

<div id="categories-container-content">

  <div id="tab-1" class="tab-content">1</div>
  <div id="tab-2" class="tab-content">2</div>
  <div id="tab-3" class="tab-content">3</div>
  <div id="tab-4" class="tab-content current">4</div>
  <div id="tab-5" class="tab-content">5</div>
  <div id="tab-6" class="tab-content">6</div>

</div>