La alineación Bulma Vertical se usa para alinear sus columnas verticalmente, agregue el modificador is-vcentered al contenedor de columnas.
Clase de alineación vertical de Bulma:
- is-vcentered: Esta clase se utiliza para centrar las columnas verticalmente.
Sintaxis:
<div class="columns is-vcentered"></div>
Ejemplo: El siguiente ejemplo ilustra la alineación vertical de Bulma.
HTML
<!DOCTYPE html> <html> <head> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body class="has-text-centered"> <h1 class="is-size-2 has-text-success"> GeeksforGeeks </h1> <b>Bulma Vertical Alignment</b> <br> <br> <div class="container mx-4"> <div class="columns is-vcentered"> <div class="column has-background-success is-8"> First column </div> <div class="column is-0"></div> <div class="column has-background-primary"> Second column, this Column have the less width so the vertical alignment will be visible with the First Column. </div> </div> </div> </body> </html>
Producción:
Referencia: https://bulma.io/documentation/columns/options/#vertical-alignment
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA