web-dev-qa-db-fra.com

Image du centre à Bulma

Existe-t-il un moyen de centrer horizontalement une image dans une carte?

J'ai le suivant

  <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>

et je ne peux pas centrer l'image. J'ai essayé d'ajouter is-centered à la fois à la figure et à la div parent mais rien ne change.

Merci.

bulma
8
Sig

Modifiez la propriété display de card-content en flex en utilisant le modificateur .is-flex.

Vous pouvez maintenant utiliser les propriétés flexbox pour centrer horizontalement la figure. Il n'y a pas de classe de modification pour cela avec Bulma, vous pouvez donc créer votre propre ...

.is-horizontal-center {
  justify-content: center;
}

Ajoutez ceci à card-content et vous avez terminé.

.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>

13
sol

Vous pouvez également utiliser un élément .level trouvé dans la section Bulma layout. Bulma utilise les éléments de niveau pour faciliter le centrage horizontal et vertical d'éléments tels que des images et d'autres éléments que le texte. Vous pouvez trouver plus d'informations à ce sujet ici . 

<!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>

Remarque: pour que plusieurs éléments (par exemple, une image et un texte) soient centrés horizontalement et verticalement, il vous suffit de placer les éléments .level l'un sous l'autre:

<!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>

7
buildpax

Définissez la balise figure en inline-block et affectez has-text-centered à la balise parent. L'avantage est qu'aucun code personnalisé n'est nécessaire.

<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>

4
Merbin J Anselm