Alineación vertical de Bulma

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:

Bulma Vertical alignment

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

HTML

Deja una respuesta Cancelar la respuesta