Center image in Bulma

L

5

36

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.

Locoism answered 16/1, 2018 at 9:2 Comment(0)

T

23

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>

Trowel answered 16/1, 2018 at 9:27 Comment(3)

Thanks, that just works. Since I need to add other tags to the card, I ended up to add is-flex is-horizontal-center to the figure tag otherwise also the other tags would be horizontally aligned with the image. – Locoism 17/1, 2018 at 3:5

I add more flex, it's working for me: display: flex; – Deepen 7/11, 2019 at 7:30

I downvoted this answer because, while technically correct, it breaks out of how Bulma works and circumvents the built in modifiers. The correct answer is just simply adding is-inline-block to the image. And everything will flow just right. See the answer from @Merbin below. – Oscitancy 7/7, 2020 at 14:9

Y

68

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>

Yardmaster answered 13/1, 2019 at 7:31 Comment(4)

this definitely seems like the best answer to me compared to the others. makes sense and doesn't require custom styles. – Massimiliano 25/2, 2019 at 5:36

the class 'is-inline-block' is all I needed! Thaanks! – Daisey 27/2, 2019 at 5:20

Thank you, the accepted solution was not working for me as I'm not using a card in my columns and just have a <figure> <image> hierarchy. This solution worked for me, cheers! – Anadem 21/11, 2019 at 2:37

This is the answer – Ermines 7/6, 2021 at 17:10

T

23

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>

Trowel answered 16/1, 2018 at 9:27 Comment(3)

Thanks, that just works. Since I need to add other tags to the card, I ended up to add is-flex is-horizontal-center to the figure tag otherwise also the other tags would be horizontally aligned with the image. – Locoism 17/1, 2018 at 3:5

I add more flex, it's working for me: display: flex; – Deepen 7/11, 2019 at 7:30

I downvoted this answer because, while technically correct, it breaks out of how Bulma works and circumvents the built in modifiers. The correct answer is just simply adding is-inline-block to the image. And everything will flow just right. See the answer from @Merbin below. – Oscitancy 7/7, 2020 at 14:9

A

13

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>

Alidia answered 23/6, 2018 at 3:44 Comment(0)

E

12

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

Eiderdown answered 22/12, 2019 at 19:43 Comment(0)

B

-2

You can use the Flexbox helpers: is-flex and is-justify-content-center

...
<figure class="image is-128x128 is-flex is-justify-content-center">
    <img src="assets/images/logo.png" alt="logo">
</figure>
...

Baryram answered 18/11, 2020 at 4:18 Comment(0)

Recommended topics

Hot tags