Semantic UI es el marco de código abierto que utilizó CSS y jQuery para hacer que nuestros sitios web se vean hermosos y receptivos. Tiene clases predefinidas como bootstrap para usar para hacer que nuestro sitio web sea más interactivo. Tiene algunos componentes semánticos preconstruidos y podemos usar estos componentes para crear un sitio web receptivo.
Semantic-UI Grid se utiliza para armonizar el espacio negativo en el diseño de nuestra página web. El contenido de centrado de cuadrícula variable se utiliza para centrar las columnas dentro de la cuadrícula. Si la fila no ocupa todo el espacio de las dieciséis columnas de la cuadrícula, podemos centrar las columnas usando la clase centrada . En este artículo, discutiremos la variación del contenido centrado en la cuadrícula en CSS semántico.
Clase de contenido de centrado de cuadrícula variable de interfaz de usuario semántica:
- centered: Esta clase se utiliza para centrar las columnas dentro de la grilla.
Sintaxis:
<div class="ui *columns centered grid"> ..... </div>
Ejemplo 1: el siguiente código demuestra el contenido de centrado de cuadrícula variable de la interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Varying Grid Centering Content </title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet"/> </head> <body> <div class="ui container center aligned"> <h2 class="ui green header"> GeeksforGeeks </h2> <h3> Semantic-UI Varying Grid Centering Content </h3> </div> <br> <div class="ui two column centered grid"> <div class="blue column"> GeeksforGeeks 1 </div> <div class="four column centered row"> <div class="red column"> GeeksforGeeks 2 </div> <div class="green column"> GeeksforGeeks 3 </div> </div> </div> </body> </html>
Producción:
Contenido de centrado de cuadrícula variable de interfaz de usuario semántica
Ejemplo 2: el siguiente código demuestra el contenido de centrado de cuadrícula variable de interfaz de usuario semántica con más filas y columnas .
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Varying Grid Centering Content </title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet"/> </head> <body> <div class="ui container center aligned"> <h2 class="ui green header"> GeeksforGeeks </h2> <h3> Semantic-UI Varying Grid Centering Content </h3> </div> <br> <div class="ui three column centered grid"> <div class="green column"> GeeksforGeeks 1 </div> <div class="blue column"> GeeksforGeeks 2 </div> <div class="red column"> GeeksforGeeks 3 </div> <div class="four column centered row"> <div class="red column"> GeeksforGeeks 4 </div> <div class="green column"> GeeksforGeeks 5 </div> <div class="yellow column"> GeeksforGeeks 6 </div> </div> <div class="two column centered row"> <div class="blue column"> GeeksforGeeks 7 </div> </div> <div class="three column centered row"> <div class="red column"> GeeksforGeeks 8 </div> </div> </div> </body> </html>
Producción:
Contenido de centrado de cuadrícula variable de interfaz de usuario semántica
Referencia: https://semantic-ui.com/collections/grid.html#centering-content
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA