Centrar elementos flotantes con CSS
CSS se utiliza para diseñar cómo se ven los elementos HTML en las pantallas y controlar múltiples diseños de páginas web a la vez. Este artículo discutirá las propiedades float y center de CSS.
Centrar elementos flotantes con CSS
La propiedad flotante de CSS se utiliza para posicionar y dar formato al contenido del documento HTML. Como estándar, las propiedades flotantes tienen solo cuatro valores: izquierda, derecha, ninguna, heredar.
Los valores left y right harán flotar elementos a la izquierda y derecha respectivas del contenedor.
El valor ninguno se utiliza para que los elementos no floten. Finalmente, el valor heredar hace que la propiedad herede el valor flotante de su padre.
No podemos usar el valor centro con elementos flotantes. Por lo tanto, exploraremos métodos para centrar elementos flotantes en este artículo.
Método 1 para centrar elementos flotantes con CSS
Código de ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>html 3 column layout</title>
<link rel="stylesheet" href="style1.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>CSS float center</h1>
<div class="container">
<div class="float_center">
<ul>
<li style="list-style-type: none; ">content</li>
<li style="list-style-type: none; ">content</li>
<li style="list-style-type: none; ">content</li>
</ul>
</div>
</div>
</body>
</html>
En el ejemplo anterior, se crea una clase HTML contenedor como primer paso; dentro de eso, otra clase se llama float_center. Podemos agregar contenido o elementos que queremos que floten y se centren dentro de ambas clases.
.container{
border: 1px solid red;
float: left;
position: relative;
left: 40%;
}
Después de eso, las propiedades CSS deben agregarse a la clase contenedor. El código CSS anterior pone la propiedad float y establece el valor como left para hacer que una clase de contenedor cambie el ancho según el contenido.
Podemos agregar una propiedad de borde alrededor de los elementos. Además, la posición debe ser relativa, lo que significa que los elementos se colocan en relación con su posición normal.
La propiedad left hará que se mueva fuera de su posición normal.
En este ejemplo, hemos establecido una propiedad izquierda en un valor del 40 % para que el contenido se desplace un 40 % de su posición normal.
Como resultado del código CSS, podemos obtener el resultado anterior. De un vistazo, podemos ver que está centrado en el borde izquierdo del contenedor.
El elemento float ya está centrado, pero debemos agregar el siguiente código CSS para que funcione correctamente.
.container{
float: left;
position: relative;
left: 50%;
}
.float_center{
border: 1px solid red;
text-align: center;
background-color: bisque;
padding-right: 20px;
font-size: 25px;
margin-top: 50px;
float: left;
position: relative;
left:-50% ;
}
<!DOCTYPE html>
<html>
<head>
<title>html 3 column layout</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>CSS float center</h1>
<div class="container">
<div class="float_center">
<ul>
<li style="list-style-type: none; ">content</li>
<li style="list-style-type: none; ">content</li>
<li style="list-style-type: none; ">content</li>
</ul>
</div>
</div>
</body>
</html>
En este código, agregamos estilos para la clase float_center. Deberíamos establecer la propiedad float en el valor left.
La posición debe ser relativa a una clase principal. La propiedad izquierda debe ser -50% para centrar los elementos flotantes.
Aparte de eso, podemos diseñar el contenido flotante usando propiedades como borde, text-align, background-color, padding, font-size y margin. Esas propiedades pueden definir las necesidades de un diseñador.
Producción:
Este es el resultado final del ejemplo de centro flotante anterior. De manera similar, podemos ajustar los elementos flotantes al centro usando el código anterior.
Método 2 para centrar elementos flotantes con CSS
Considerando otro uso del método del centro flotante, podemos identificar la paginación. Solía aplicarse a sitios web que tienen muchas páginas.
Al crear la paginación, usamos con frecuencia la propiedad flotante para alinear. Importa cómo se puede centrar la paginación usando la propiedad flotante.
Para resolver esto, podemos usar las siguientes propiedades y valores de CSS.
Código de ejemplo:
<!DOCTYPE html>
<head>
<title>Pagination</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2 style="text-align: center;">Float center pagination</h2>
<div class="center">
<div class="pagination">
<a href="#">«
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">»</a>
</div>
</div>
</body
Este es el código HTML que tiene dos clases, que son centro y paginación. En este código HTML, configuramos cinco elementos href con los enlaces de cada página.
Teniendo en cuenta la consecuencia anterior, podemos ver que los elementos de paginación no están centrados ni flotantes. Usando el siguiente código CSS, podemos establecer la paginación flotante y centrada.
.center{
text-align: center;
}
.pagination{
display: inline-block;
margin: 50px;
}
.pagination a{
color: black;
float: left;
padding: 9px 18px;
text-decoration: none;
border: 1px solid black;
border-radius: 5px;
background-color: #efeded;
margin: 0 4px;
}
.pagination a:hover{
background-color: #7d656f;
}
Podemos establecer una propiedad text-align en el valor center para hacer que el centro sea la paginación. Por lo general, la paginación se puede colocar al lado de cada elemento usando la propiedad flotante.
Como puede ver, la clase de paginación del código anterior se muestra como un bloque en línea y establece un margen de 50 píxeles.
Dentro de la clase de paginación del código HTML, definimos siete elementos href. En el código CSS, creamos un selector de paginación a para diseñar esos elementos href.
La propiedad float se establece principalmente en el valor left para colocar el elemento de paginación uno al lado del otro.
La propiedad color define el color de fuente de los elementos de paginación. La propiedad padding crea espacio dentro de los elementos y sus bordes, y la propiedad border-radius redondea las esquinas de los bordes.
Las propiedades background-color, margin, text-decoration y border utilizadas para diseñar elementos href. Finalmente, se agrega la propiedad hover a los elementos de paginación cambiando el color de fondo.
Podemos obtener la siguiente ayuda de paginación de centro flotante con el código CSS anterior.
Los dos métodos anteriores se pueden utilizar para centrar elementos flotantes. El primer método es compatible con cualquier escenario que posea elementos flotantes.
El segundo puede crear todo tipo de paginaciones.
Formas alternativas de centrar elementos flotantes
Se recomienda encarecidamente no utilizar la propiedad float para centrar texto de una sola línea. Aplicar text-align:center en el bloque contenedor.
Además, podemos centrar un bloque o elemento simplemente configurando los márgenes izquierdo y derecho en valores similares. Si el bloque tiene un ancho claro, podemos establecer los márgenes derecho e izquierdo en el valor auto.
Conclusión
Este artículo considera cómo centrar bloques flotantes o elementos en CSS. Hemos mencionado dos métodos que se aplican a cualquier elemento o bloque flotante.
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.