센터 UL-탐색 [부트 스트랩 탭]

Question

나는 다음과 같은 문제가 :

FULL CODE : jsfiddle

HTML 부분 :

<div class="gc-tabs"> 
    <!-- importar icones em cada aba --> 
    <ul id="home-tabs-menu" class="nav nav-tabs"> 
    <li class="most-read active"> 
     <a href="#mais-vistas"> 
     <img class="center-block" src="http://guiadacozinha.app/wp-content/themes/gc/assets/images/svg/most-read.svg" /> 
     Mais Vistas 
     </a> 
    </li> 
    <li class="best-rated"> 
     <a href="#melhor-avaliadas"><img class="center-block" src="http://guiadacozinha.app/wp-content/themes/gc/assets/images/svg/best-rated.svg" /> 
     Melhor avaliadas 
     </a> 
    </li> 
    <li class="most-commented"> 
     <a href="#mais-comentadas"> 
     <img class="center-block" src="http://guiadacozinha.app/wp-content/themes/gc/assets/images/svg/most-commented.svg" /> 
     Mais comentadas 
     </a> 
    </li> 
    </ul> 


    <div class="tab-content"> 
    <div id="mais-vistas" class="tab-pane fade in active"> 
     <a href="#" class="recipe-card"> 
     <div class="recipe-img"> 
      <img src="http://guiadacozinha.app/wp-content/themes/gc/assets/images/img-teste.png" /> 
     </div> 
     <div class="recipe-desc"> 
      <h3 class="recipe-title">Petit gâteau de caneca</h3> 
      <div>rating</div> 
      <span>Fácil</span> 
      <span>45min</span> 
     </div> 
     </a> 
     <a href="#" class="recipe-card"> 
     <div class="recipe-img"> 
      <img src="http://guiadacozinha.app/wp-content/themes/gc/assets/images/img-teste.png" /> 
     </div> 
     <div class="recipe-desc"> 
      <h3 class="recipe-title">Petit gâteau de caneca</h3> 
      <div>rating</div> 
      <span>Fácil</span> 
      <span>45min</span> 
     </div> 
     </a> 
     <a href="#" class="recipe-card"> 
     <div class="recipe-img"> 
      <img src="http://guiadacozinha.app/wp-content/themes/gc/assets/images/img-teste.png" /> 
     </div> 
     <div class="recipe-desc"> 
      <h3 class="recipe-title">Petit gâteau de caneca</h3> 
      <div>rating</div> 
      <span>Fácil</span> 
      <span>45min</span> 
     </div> 
     </a> 
    </div> 
    <div id="melhor-avaliadas" class="tab-pane fade"> 
     <h3>Melhor avaliada #1</h3> 
     <img src="http://guiadacozinha.app/wp-content/themes/gc/assets/images/img-teste.png" /> 
    </div> 
    <div id="mais-comentadas" class="tab-pane fade"> 
     <h3>Mais comentada #1</h3> 
     <img src="http://guiadacozinha.app/wp-content/themes/gc/assets/images/img-teste.png" /> 
    </div> 
    </div> 

</div> 

FULL CODE: https://jsfiddle.net/Lqp1g1ge/ 

내가 3 개 탐색 아이콘 중심이 차지해야 그 같은 모든 공간 :

나 좀 도와 줄래?

Answer 1

가장 간단한 수정으로 CSS를 그렇게 설정하십시오. 제공된 이미지가 작동하지 않기 때문에 자신의 이미지를 추가했습니다.

CSS3는 :

ul#home-tabs-menu{ 
    display:flex; 
} 
ul#home-tabs-menu li{ 
    display:flex; 
    align-items:center; 
    flex-grow:1; 
    height:100%; 
} 
ul#home-tabs-menu li>a{ 
    text-align:center; 
    width:100%; 
} 

JSFiddle Demo