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>

Tags:

Bulma

Recent Posts