Center content in bulma column
32,432
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"
Author by
niko
Updated on July 05, 2022Comments
-
niko almost 2 years
I have multiple columns. Each column contains a circle in the CSS within a font awesome icon centered in it. Now I wanna make align the circle itself in the middle of the column. However, it keeps staying on the left while the text itself gets centered.
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; }
-
fuggerjaki61 over 3 yearsIt would be nice if you edited your answer to show some more effort (small explanation, specify where to put it, etc.). Also see How to Answer