Fundación - Columnas centradas

Descripción

Incluyendo la clase pequeña centrada en la columna, puede hacer que la columna esté en el centro. La clase de centrado grande se utiliza para centrar la columna en dispositivos grandes. Para no centrar las columnas en dispositivos o pantallas grandes, incluya la clase de no centrar grande.

Ejemplo

El siguiente ejemplo demuestra el uso de columnas centradas en Foundation:

<!DOCTYPE html>
<html>
   <head>
      <title>Foundation Template</title>

      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" crossorigin="anonymous">

      <!-- Compressed JavaScript -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js" integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw==" crossorigin="anonymous"></script>
      
   </head>

   <body>
      <h2>Centered Columns</h2>

      <div class = "row">
         <div class = "small-2 small-centered columns" style = "background-color:#8BD6EE;">
            Small centered
         </div>
      </div>

      <div class = "row">
         <div class = "small-4 small-centered columns" style = "background-color:#C0B0F0;">
            Small centered
         </div>
      </div>

      <div class = "row">
         <div class = "small-6 small-centered large-uncentered columns" style = "background-color:#808000;">
            Large uncentered
         </div>
      </div>

      <div class = "row">
         <div class = "small-8 small-centered columns" style = "background-color:#FF6347;">
            Small centered
        </div>
      </div>

      <div class = "row">
         <div class = "small-10 large-centered columns" style = "background-color:#7B68EE;">
            Large centered
         </div>
      </div>

   </body>
</html>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código html dado anteriormente centered_columns.htm archivo.
Abra este archivo HTML en un navegador, se muestra una salida como se muestra a continuación.

↰ Previous page