Сосредоточить содержание в столбце Bulma - PullRequest
Новая
       10

Сосредоточить содержание в столбце Bulma

0 голосов
/ 17 мая 2018

У меня есть несколько столбцов. Каждый столбец содержит кружок в CSS внутри шрифта с иконкой в ​​центре. Теперь я хочу выровнять сам круг в середине колонны. Тем не менее, он остается слева, в то время как сам текст центрируется.

HTML 

<div class="features">
  <div class="container">
    <div class="columns is-mobile ">
      <div class="column">
        <div class="community">
          <font-awesome-icon col size="2x" :icon="['fas', 'tasks']" />
        </div>
        Features
      </div>
    </div>
  </div>
</div>

CSS 

.features {
  background: #2a3a4c;
  height: 200px;
}

.community {
  width: 5rem;
  height: 5rem;
  background: linear-gradient(135deg, #b15757 0%, #b96868 100%);
  border-radius: 100%;
  text-align: center;
  vertical-align: middle;
  display: table-cell;
}

Ответы [ 2 ]

0 голосов
/ 17 мая 2018

<div class="columns is-centered">...</div> центнеров колонны. Вы должны установить a ширина для столбца внутри , чтобы он работал . Класс is-narrow занимает только пробел он нуждается .

Пример 

.features {
  background: #2a3a4c;
}

.features .columns {
  height: 200px;
}

.circle {
  width: 5rem;
  height: 5rem;
  background: linear-gradient(135deg, #b15757 0%, #b96868 100%);
  border-radius: 100%;
  text-align: center;
  vertical-align: middle;
  display: table-cell;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" rel="stylesheet" />
<div class="features">
  <div class="container">
    <div class="columns is-centered is-vcentered is-mobile">
      <div class="column is-narrow has-text-centered">
        <div class="circle">
          <font-awesome-icon col size="2x" :icon="['fas', 'tasks']" />
        </div>
        Features
      </div>
    </div>
  </div>
</div>

Дополнительная информация: Размеры колонн Бульма

0 голосов
/ 17 мая 2018

Вам нужно использовать table-cell для .community?Похоже, он ничего не делал.Если нет, вы можете изменить 

.community {
  width: 5rem;
  height: 5rem;
  background: linear-gradient(135deg, #b15757 0%, #b96868 100%);
  border-radius: 100%;
  text-align: center;
  vertical-align: middle;
  display: table-cell;
}

на 

.community {
  width: 5rem;
  height: 5rem;
  background: linear-gradient(135deg, #b15757 0%, #b96868 100%);
  border-radius: 100%;
  text-align: center;
  margin: 0 auto;
}

и добавить 

.column {
  text-align: center;
}

Это сделает все по центру.

Вы можете увидетьрабочий пример на https://codepen.io/anon/pen/odQGoj

PS вам не хватает закрытия </div> для <div class="features">

...