Center image in Bulma

33,978

Solution 1

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>

Solution 2

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>

Solution 3

You can also use a .level element found in the Bulma layout section. The level elements are what Bulma uses to assist with specific vertical and horizontal centering of elements such as images and things other than text. You can find more information about it here.

<!DOCTYPE html>
<html lang="en">

<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" rel="stylesheet" />
</head>

<body>
  <div class='column is-one-quarter has-text-centered'>
    <div class='card equal-height'>
      <div class='card-content'>
<!-- Place image inside .level within your card element -->
        <nav class="level">
          <div class="level-item has-text-centered">
            <figure class='image is-64x64'><img src='https://bulma.io/images/placeholders/128x128.png'></figure>
          </div>
        </nav> 
<!-- And it'll be centered like so -->
      </div>
    </div>
  </div>
</body>

</html>

Note: In order to have multiple elements (i.e. Such as an image and text) horizontally centered and vertically centered, all you have to do is place .level elements underneath each other:

<!DOCTYPE html>
<html lang="en">

<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" rel="stylesheet" />
</head>

<body>
  <div class='column is-one-quarter has-text-centered'>
    <div class='card equal-height'>
      <div class='card-content'>
        <!-- Place image inside .level within your card element -->
        <nav class="level">
          <div class="level-item has-text-centered">
            <figure class='image is-64x64'><img src='https://bulma.io/images/placeholders/128x128.png'></figure>
          </div>
        </nav>
        <nav class="level">
          <div class="level-item has-text-centered">
            <h1>Title to image</h1>
          </div>
        </nav>
        <!-- And it'll be centered like so -->
      </div>
    </div>
  </div>
</body>

</html>

Solution 4

Native Bulma solution:

<div class="columns is-flex is-centered">
    <figure class="image is-128x128">
        <img src="assets/images/logo.png" alt="logo">
    </figure>
</div>

Put your code between columns, is-flex and is-centered div

Share:
33,978
Sig
Author by

Sig

Updated on November 18, 2020

Comments

  • Sig
    Sig almost 3 years

    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.