En este artículo, veremos las opciones de columnas de centrado de Bulma. La opción de alineación de columna de centrado se utiliza para alinear sus columnas centradas. Esta clase reduce la escritura adicional de código cuando existe la necesidad de crear espacio adicional horizontalmente.
Clase de opción de columnas de centrado Bulma:
- is-centered: Esta clase se utiliza para centrar las columnas horizontalmente.
Sintaxis:
<div class="columns is-centered"> .... </div>
Ejemplo: El siguiente código muestra cómo se centran las columnas usando la clase centrada.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" /> </head> <body> <div class="container content has-text-centered"> <h1 class="has-text-success"> GeekforGeeks</h1> <strong class="has-text-dark"> Bulma Centering column option </strong> <br> <div class="columns is-mobile is-centered has-text-centered"> <div class="column is-half"> <p class="bd-notification is-primary"> <p class="has-text-white has-background-primary"> is-centered class </p> </div> </div> </div> </body> </html>
Producción:
Opción Columnas de Centrado Bulma
Referencia: https://bulma.io/documentation/columns/options/#centering-columns
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA