Fondation - Colonnes centrées

La description

En incluant la classe petit-centré sur colonne, vous pouvez créer la colonne au centre. La classe large centrée est utilisée pour centrer la colonne dans les grands appareils. Pour décentrer les colonnes dans de grands appareils ou un écran, incluez la classe grand-uncenter .

Exemple

L'exemple suivant illustre l'utilisation de colonnes centrées dans 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>

Production

Exécutons les étapes suivantes pour voir comment fonctionne le code donné ci-dessus -

  • Enregistrez le code html ci-dessus centered_columns.htm fichier.

  • Ouvrez ce fichier HTML dans un navigateur, une sortie s'affiche comme indiqué ci-dessous.