Presta atención ya que en esta reseña encontrarás la solución que buscas.
Creo que es un poco gracioso que .columns no tiene display:flex; por defecto (¿debería haberlo hecho?). De todos modos, si usa algo que agrega flex, por ejemplo:
class="columns is-desktop is-vcentered"
entonces obtienes display:flex desde is-desktop y ahora de repente is-vcentered funciona según lo previsto.
También creo que la semántica está apagada ya que is-vcentered sugiere que es columns que se centra verticalmente. Pero lo que realmente hace (de la fuente):
.columns.is-vcentered
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
es hacer hijos de columns estar centrado verticalmente en el interior columns. Por lo tanto, es probable que también deba establecer una altura de columns elemento para que esto funcione.
creo is-vcentered debería llamarse algo así como has-vcentered-content, pero tal vez me esté perdiendo algo obvio.
tl; dr; Agregue altura y flexión a la columns-elemento para is-vcentered hacer algo.
Lo siento, supongo que esto es más una extrapolación del problema y no una solución.
Creo que la solución real probablemente sea usar la clase de héroe existente aquí. (Que, por cierto, se centra manualmente usando rellenos, ¡como en la respuesta de Peter Leger!).
Las columnas no están centradas verticalmente porque ha utilizado una altura para la sección. Usarrelleno a aumento el altura.
Quitar la clase .section (en Bulma)
.section
background-color: white;
padding: 3rem 1.5rem;
y use su propio acolchado.
Ejemplo
.red-bg
background: red;
.orange-bg
background: orange;
section
padding: 100px 15px;
Eyes on what matters
Backtick is made to look minimal, so you can focus on your code, always. From UI to linter errors, everything is kept non-obtrusive.
Eyes on what matters
Backtick is made to look minimal, so you can focus on your code, always. From UI to linter errors, everything is kept non-obtrusive.
Eyes on what matters
Backtick is made to look minimal, so you can focus on your code, always. From UI to linter errors, everything is kept non-obtrusive.
POSDATA
Puedes usar .columns is-vcentered dos veces. En ese caso, puede establecer una altura para la sección.
section
height: 70vh;
padding: 15px;
.red-bg
background: red;
.orange-bg
background: orange;
Eyes on what matters
Backtick is made to look minimal, so you can focus on your code, always. From UI to linter errors, everything is kept non-obtrusive.
Eyes on what matters
Backtick is made to look minimal, so you can focus on your code, always. From UI to linter errors, everything is kept non-obtrusive.
Eyes on what matters
Backtick is made to look minimal, so you can focus on your code, always. From UI to linter errors, everything is kept non-obtrusive.
Actualización: vine aquí de buscar en Google una forma de verticalmente alinear elementos dentro .content no .column clase. Otros podrían tropezar con este lugar por la misma razón.
Si está tratando de alinear verticalmente elementos dentro .content clase, esto es lo que hice:
.content.is-vcentered
display: flex;
flex-wrap: wrap;
align-content: center; /* used this for multiple child */
align-items: center; /* if an only child */
Nota: esto es muy útil para divEs que tiene altura fija.
Aquí hay un ejemplo de estructura html en la que funcionó
Content
that might be from
wysiwyg containing
multiple lines
Some text line
Aquí hay un jsfiddle de muestra
Aquí tienes las reseñas y valoraciones
Si haces scroll puedes encontrar las reseñas de otros administradores, tú también puedes dejar el tuyo si te gusta.