Center image in Bulma
Make the figure
tag an inline-block
and assign has-text-centered
to the parent tag. Advantage is no custom code needed.
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css" rel="stylesheet"/>
<div class='column is-one-quarter'>
<div class='card equal-height'>
<div class="card-image has-text-centered">
<figure class="image is-64x64 is-inline-block">
<img class="is-rounded" src="https://unsplash.it/64"/>
</figure>
</div>
<div class='card-content'>
<!-- other content here -->
</div>
</div>
</div>
Change the display property of card-content
to flex
by using the .is-flex
modifier.
Now you can use flexbox properties to horizontally center the figure
. There is no modifying class for this with Bulma, so you can make your own...
.is-horizontal-center {
justify-content: center;
}
Add this to card-content
and you're done.
.is-horizontal-center {
justify-content: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css" rel="stylesheet"/>
<div class='column is-one-quarter'>
<div class='card equal-height'>
<div class='card-content is-flex is-horizontal-center'>
<figure class='image is-64x64'><img src='https://unsplash.it/64'></figure>
</div>
</div>
</div>