Center image in Bulma

Question

Is there a way to horizontally centered an image inside a card?

I have the following

  <div class='column is-one-quarter has-text-centered'>     <div class='card equal-height'>       <div class='card-content'>         <figure class='image is-64x64'><img src='...'></figure>       </div>     </div>   </div> 

and I cannot center the image. I have tried to add is-centered both to the figure and to the parent div but nothing changes.

Thanks.

Answer 1

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>