html - 中心 ul-nav [ Bootstrap 选项卡]

Question

我有以下问题:

完整代码: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