Solución:
Hacer el figure etiquetar un inline-block y asignar has-text-centered a la etiqueta principal. La ventaja es que no se necesita un código personalizado.
<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>Cambiar la propiedad de visualización de card-content para flex usando el .is-flex modificador.
Ahora puede usar las propiedades de flexbox para centrar horizontalmente el figure. No hay una clase de modificación para esto con Bulma, por lo que puedes hacer la tuya propia …
.is-horizontal-center {
justify-content: center;
}
Agregar esto a card-content y tu estas listo.
.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>También puede utilizar un .level elemento encontrado en Bulma diseño sección. Los elementos de nivel son los que utiliza Bulma para ayudar con el centrado vertical y horizontal específico de elementos como imágenes y otras cosas además del texto. Puedes encontrar más información al respecto aquí.
<!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>Nota: Para tener varios elementos (es decir, como una imagen y texto) centrados horizontalmente y centrado verticalmente, todo lo que tienes que hacer es colocar .level elementos uno debajo del otro:
<!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>