Как отобразить список с изображениями и текстом с отображением: 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"> и все еще быть кликабельным?

Вот скрипка: 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>

Answer 2

В вашем классе module css добавьте следующие свойства.

.module {
  display: flex;
  flex-direction: column;
  justify-content: center;
  ....
}

рабочая скриптовая ссылка: demo

Answer 3

Используйте свойства position .

$(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;
  align-items: center;
  height: 60px;
  line-height: 54px;
  text-align: center;
  background: #FFFFFF;
  color: #666666;
  text-transform: uppercase;
  position: relative;
}

.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;
  bottom: -35px;
  position: absolute;
  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>