Lösung:
<div class="columns is-centered">...</div>
zentriert die Säule. Sie müssen einstellen ein Breite für die Spalte drinnen damit es funktioniert. Die Klasse is-narrow
nimmt nur der Platz es braucht.
Beispiel
.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>
Weitere Informationen: Bulma Säulengrößen
Dadurch werden Ihr Text, Ihre Schaltflächen oder Bilder zentriert
Zum HTML-Inhalt hinzufügen:
class="has-text-centered"
Und wenn Sie möchten, dass die Datei-Upload-Eingabe zentriert ist
Zum HTML-Inhalt hinzufügen:
class="is-centered"
Click to rate this post!
[Total: 0 Average: 0]