как центрировать значок и текст в элементе навигации Bulma

Я начал играть с Bulma и Buefy framework и застрял с этой проблемой.
Я пытаюсь воспроизвести меню приложений Googleù, я создал div-элемент navbar-item и поместил внутрь следующий код:

<div class="columns">
    <div class="column">
        <a>
            <b-icon
                icon="cloud-outline">
            </b-icon>
            <span>function 1</span>
        </a>
    </div>
    <div class="column">
        <b-icon
            icon="compass">
        </b-icon>
        Function 2
    </div>
    <div class="column">
        <b-icon
            icon="scatter-plot">
        </b-icon>
        Function 3
    </div>
</div>

вывод:
введите описание изображения здесь

Я хочу добиться следующего результата: введите описание изображения здесь

Как я могу центрировать значок и переместить текст на новую строку?


css buefy bulma
person Tinwor    schedule 04.04.2020    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете использовать flexbox для оформления своих ссылок:

.custom-nav a {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  padding: 1em;
  background-color: rgba(0, 0, 0, 0.1);
}

.custom-nav i {
  font-size: 3rem;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css" integrity="sha256-1nEaE91OpXJD7M6W5uSiqxhdmrY+lOOTHC1iUxU9Pds=" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js" integrity="sha256-KzZiKy0DWYsnwMF+X1DvQngQ2/FxF7MF3Ff72XcpuPs=" crossorigin="anonymous"></script>

<div class="columns custom-nav">

  <div class="column">
    <a href="#">
      <i class="fas fa-box-tissue fa-2x"></i>
      <span>function 1</span>
    </a>
  </div>

  <div class="column">
    <a href="#">
      <i class="fas fa-handshake-slash fa-2x"></i>
      <span>function 2</span>
    </a>
  </div>

  <div class="column">
    <a href="#">
      <i class="fas fa-head-side-mask fa-2x"></i>
      <span>function 3</span>
    </a>
  </div>

  <div class="column">
    <a href="#">
      <i class="fas fa-shield-virus fa-2x"></i>
      <span>function 3</span>
    </a>
  </div>

</div>

person Daniel Sixl    schedule 04.04.2020

arrow_upward
1
arrow_downward

Вы можете сделать это с помощью CSS Flex. Используя дополнительные клавиши:

  • flex-direction (указывает направление гибкости) подать заявление)
  • align-items (выравнивает элементы внутри контейнера )
  • justify-content (размещение элементов внутри контейнера )
.columns {
  display: flex;
  justify-content: space-evenly;
}

.column {
  display: flex;
  flex-direction: column;
  align-items: center;
}


.columns {
  display: flex;
  justify-content: space-evenly;
}

.column {
  display: flex;
  flex-direction: column;
  align-items: center;
}
<div class="columns">
  <div class="column">
    <span>icon</span>
    <span>function 1</span>
  </div>
  <div class="column">
    <span>icon</span> Function 2
  </div>
  <div class="column">
    <span>icon</span> Function 3
  </div>
</div>

person Sølve Tornøe    schedule 04.04.2020