web-dev-qa-db-fra.com

Comment centrer les éléments verticalement dans Bulma?

Comment puis-je centrer verticalement ce <div class="columns is-vcentered"> par rapport à cette section de couleur rouge qui le renferme?

Et dois-je supprimer ou ajouter des classes ici pour améliorer ce code? S'il vous plaît me suggérer. Merci!

Je suis nouveau dans le framework CSS, je n’ai jamais essayé Bootstrap et j’ai opté pour Bulma.

 enter image description here 

<section id="eyes" class="section">
    <div class="container">
        <div class="columns is-vcentered">
            <div class="column">
                <h1>Eyes on what matters</h1>
                <p>Backtick is made to look minimal, so you can focus on your code, always. From UI to linter errors, everything is kept non-obtrusive.</p>
            </div>
            <div class="column">
                <img class="image" src="img/roll.jpg" alt="">
            </div>
        </div>
    </div>
</section>

En CSS, hormis les éléments à colorier, je n’ai fait que ceci:

section {
    height: 70vh;
}
cssbulma
15
Ajit

Je pense que c'est un peu drôle que .columns n'ait pas display:flex; par défaut (devrait-il en avoir peut-être?). Quoi qu’il en soit, si vous utilisez quelque chose qui ajoute de la flexibilité, par exemple:

class="columns is-desktop is-vcentered"

alors vous obtenez display:flex de is-desktop et maintenant soudainement is-vcentered fonctionne comme prévu. 

De plus, je pense que la sémantique est désactivée puisque is-vcentered suggère que c'est columns qui est centré verticalement. Mais ce qu'il fait réellement (à partir de la source):

.columns.is-vcentered {
  -webkit-box-align: center;
     -ms-flex-align: center;
        align-items: center;
}

est de faire en sorte que les enfants de columns soient centrés verticalement à l'intérieur de columns. Il est donc probablement nécessaire de définir une hauteur de votre élément columns pour que cela fonctionne. 

Je pense que is-vcentered devrait s'appeler quelque chose comme has-vcentered-content, mais il me manque peut-être quelque chose d'évident.

tl; dr; Ajoutez de la hauteur et modifiez l'élément columns- pour que is-vcentered puisse faire quelque chose.

Désolé, je suppose que ceci est plus une extrapolation du problème et non une solution.

Je pense que la vraie solution consiste probablement à utiliser la classe hero-class existante ici. (Qui, au passage, utilise manuellement des rembourrages, comme dans la réponse de Peter Leger!).

23
ippi

Les colonnes ne sont pas centrées verticalement car vous avez utilisé une hauteur pour la section. Utilisez padding to augmentez la hauteur .

Supprimer la classe .section (en Bulma)

.section {
  background-color: white;
  padding: 3rem 1.5rem;
}

et utilisez votre propre rembourrage.

Exemple 

.red-bg {
  background: red;
}

.orange-bg {
  background: orange;
}

section {
  padding: 100px 15px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.3/css/bulma.css" rel="stylesheet" />
<section class="red-bg">
  <div class="container">
    <div class="columns is-vcentered">
      <div class="column">
        <h1>Eyes on what matters</h1>
        <p>Backtick is made to look minimal, so you can focus on your code, always. From UI to linter errors, everything is kept non-obtrusive.</p>
      </div>
      <div class="column">
        <img class="image" src="http://placehold.it/400x300" alt="">
      </div>
    </div>
  </div>
</section>
<section class="orange-bg">
  <div class="container">
    <div class="columns is-vcentered">
      <div class="column">
        <img class="image" src="http://placehold.it/400x300" alt="">
      </div>
      <div class="column">
        <h1>Eyes on what matters</h1>
        <p>Backtick is made to look minimal, so you can focus on your code, always. From UI to linter errors, everything is kept non-obtrusive.</p>
      </div>
    </div>
  </div>
</section>
<section class="red-bg">
  <div class="container">
    <div class="columns is-vcentered">
      <div class="column">
        <h1>Eyes on what matters</h1>
        <p>Backtick is made to look minimal, so you can focus on your code, always. From UI to linter errors, everything is kept non-obtrusive.</p>
      </div>
      <div class="column">
        <img class="image" src="http://placehold.it/400x300" alt="">
      </div>
    </div>
  </div>
</section>

POSTSCRIPT 

Vous pouvez utiliser .columns is-vcentered deux fois. Dans ce cas, vous pouvez définir une hauteur pour la section.

section {
  height: 70vh;
  padding: 15px;
}

.red-bg {
  background: red;
}

.orange-bg {
  background: orange;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.3/css/bulma.css" rel="stylesheet" />
<section class="columns is-vcentered is-centered red-bg">
  <div class="container">
    <div class="columns is-vcentered is-centered">
      <div class="column">
        <h1>Eyes on what matters</h1>
        <p>Backtick is made to look minimal, so you can focus on your code, always. From UI to linter errors, everything is kept non-obtrusive.</p>
      </div>
      <div class="column">
        <img class="image" src="http://placehold.it/400x300" alt="">
      </div>
    </div>
  </div>
</section>
<section class="columns is-vcentered orange-bg">
  <div class="container">
    <div class="columns is-vcentered">
      <div class="column">
        <img class="image" src="http://placehold.it/400x300" alt="">
      </div>
      <div class="column">
        <h1>Eyes on what matters</h1>
        <p>Backtick is made to look minimal, so you can focus on your code, always. From UI to linter errors, everything is kept non-obtrusive.</p>
      </div>
    </div>
  </div>
</section>
<section class="columns is-vcentered red-bg">
  <div class="container">
    <div class="columns is-vcentered">
      <div class="column">
        <h1>Eyes on what matters</h1>
        <p>Backtick is made to look minimal, so you can focus on your code, always. From UI to linter errors, everything is kept non-obtrusive.</p>
      </div>
      <div class="column">
        <img class="image" src="http://placehold.it/400x300" alt="">
      </div>
    </div>
  </div>
</section>

4
Sun

Mise à jour: Je suis arrivé ici en cherchant un moyen d'aligner verticalement des éléments dans la classe .content et non pas .column. Les autres pourraient tomber sur cet endroit avec la même raison.

Si vous essayez d'aligner verticalement des éléments dans la classe .content, voici ce que j'ai fait:

.content.is-vcentered {
  display: flex;
  flex-wrap: wrap;
  align-content: center; /* used this for multiple child */
  align-items: center; /* if an only child */
}

Remarque: Ceci est très utile pour les noms de div qui ont une hauteur fixe.

Voici un exemple de structure html sur laquelle il a travaillé

<div class="content is-vcentered has-text-centered">
  <h1>Content</h1>
  <p>that might be from</p>
  <p>wysiwyg containing</p>
  <p>multiple lines</p>
</div>

<div class="content is-vcentered">
  <p>Some text line</p>
</div>

Voici un exemple jsfiddle

0
pibano