web-dev-qa-db-fra.com

Centrer le contenu dans la colonne bulma

J'ai plusieurs colonnes. Chaque colonne contient un cercle dans le CSS dans une icône géniale de police centrée en elle. Maintenant, je veux faire aligner le cercle lui-même au milieu de la colonne. Cependant, il reste à gauche pendant que le texte lui-même est centré.

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;
}
htmlcssbulma
4
niko

<div class="columns is-centered">...</div> centre la colonne. Vous devez définir un largeur pour la colonne à l'intérieur pour le faire fonctionner . La classe is-narrow ne prend que l'espace il a besoin .

Exemple

.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>

Plus d'informations: tailles des colonnes Bulma

10
Sun

Avez-vous besoin d'utiliser table-cell pour .community? Il ne semblait rien faire. Sinon, vous pouvez changer

.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;
}

et ajouter

.column {
  text-align: center;
}

Cela rendra tout centré.

Vous pouvez voir l'exemple de travail sur https://codepen.io/anon/pen/odQGoj

PS vous manque une fermeture </div> pour <div class="features">

0
Axion