Center content in bulma column
<div class="columns is-centered">...</div>
centeres the column. You have to set a width for the column inside to make it work. The class is-narrow
takes only the space it needs.
Example
.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>
More information: Bulma columns sizes
This will make your text, buttons or images centred
Add to the HTML content:
class="has-text-centered"
And if you want file upload input centred
Add to the HTML content:
class="is-centered"