Foundation CSS es un marco front-end receptivo y de código abierto creado por la fundación ZURB en septiembre de 2011, que facilita el diseño de hermosos sitios web, aplicaciones y correos electrónicos receptivos para que se vean increíbles y puedan ser accesibles para cualquier dispositivo. Es utilizado por muchas empresas como Facebook, eBay, Mozilla, Adobe e incluso Disney. El marco se basa en un arranque similar a Saas. Es más sofisticado, flexible y fácilmente personalizable. También viene con CLI, por lo que es fácil de usar con paquetes de módulos. Ofrece la herramienta Fastclick.js para una renderización más rápida en dispositivos móviles.
Las clases Foundation CSS Float nos permiten agregar comportamientos de posicionamiento comunes a los elementos. Foundation CSS tiene varias clases flotantes, como Float Left, Float Right y Float Center. En este artículo, aprenderemos sobre la clase de centro flotante.
La clase Foundation CSS Float Center se utiliza para activar el truco de centrado de margen automático para centrar la alineación de un elemento dentro de un <div>. Esto funciona solo en elementos con un ancho absoluto. Para usar el efecto Float Center en Foundation CSS, usamos la clase «float-center» .
Clase Foundation CSS Float Center:
- float-center: La clase float-center alinea el elemento al centro del margen absoluto del padre <div>.
Sintaxis:
<div class="float-center">Content</div>
Ejemplo 1: El siguiente ejemplo demuestra la clase Float center en el elemento <img>.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Compressed CSS -->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
<!-- Compressed JavaScript -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js">
</script>
<style>
.main{
width: 700px;
Height: 500px;
background-color: green;
padding: 100px;
}
</style>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<strong>
Foundation CSS Float Center
</strong>
<br/><br/>
<div class="main">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"
class="float-center">
</div>
</body>
</html>
Producción:
Producción
Ejemplo 2: El siguiente ejemplo demuestra la clase de centro flotante en el elemento <div> e <img> dentro de una tarjeta.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Compressed CSS -->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
<!-- Compressed JavaScript -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js">
</script>
<style>
.main{
width: 300px;
Height: 300px;
padding: 20px;
background-color: gray;
}
</style>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<strong>
Foundation CSS Float Center
</strong>
<br/><br/>
<div class="card main">
<div class="card-section float-center">
<p>GeeksforGeeks</p>
</div>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"
class="float-center">
</body>
</html>
Producción:
Producción
Referencia: https://get.foundation/sites/docs/float-classes.html#float-center
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA