Bulma: How to centered image?

[koddr]

Hello and thanks for awesome Bulma project!

One little question: how to centered .image element? I try this:

<figure class="image is-text-centered">
  <img src="http://placehold.it/256x256">
</figure>

But it's not work.

P.S. I wish (in future) global element, like .is-centered, which make any elements to center aligned (on it's parent's container).

[anthonygore]

How did you solve it?

[koddr]

@anthonygore simply add this class:

.has-image-centered {
  margin-left: auto;
  margin-right: auto;
}

[anthonygore]

Great, thank you. I thought there might have been a class in the library for it.

[koddr]

@anthonygore it will be great, but.. @jgthms don't want to add this :(

[abdelba]

You can use the container class

<figure class="image container is-256x256">
    <img src="http://placehold.it/256x256">
</figure>

[dagumak]

You can use the container class

<figure class="image container is-256x256">
    <img src="http://placehold.it/256x256">
</figure>

Is this a side-effect of the container class? or is this an intended use case? Also, where did you get is-256x256?

[husstahn]

You can use the container class

<figure class="image container is-256x256">
    <img src="http://placehold.it/256x256">
</figure>

Is this a side-effect of the container class? or is this an intended use case? Also, where did you get is-256x256?

You can add 256 to the dimensions variable. $dimensions: 16 24 32 48 64 96 128 256;

[AlexTorianyk]

You can use the container class

<figure class="image container is-256x256">
    <img src="http://placehold.it/256x256">
</figure>

Is adding the container class supposed to work this way? How did you find out about this?

[crazyyi]

None of the above works for me if this is not in the main viewport. I have to use

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

in parent container.