La propiedad float de CSS se utiliza para establecer o devolver la alineación horizontal de los elementos. Pero esta propiedad permite que un elemento flote solo en el lado derecho o izquierdo del cuerpo principal con el resto de los elementos envueltos a su alrededor. No hay forma de flotar en el centro en el diseño CSS. Entonces, podemos centrar los elementos usando la propiedad de posición.
Ejemplo 1: Este ejemplo establece la posición de los elementos exactamente en el centro de la pantalla.
html
<!DOCTYPE html>
<html>
<head>
<title>
Make float to center to element
</title>
<!-- Style to set element float
to center -->
<style>
.Center {
width:200px;
height:200px;
position: fixed;
background-color: blue;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
</style>
</head>
<body>
<div class="Center"></div>
</body>
</html>
Producción:
Ejemplo: este ejemplo establece la posición de los elementos flotantes de texto exactamente en el centro de la pantalla.
html
<!DOCTYPE html>
<html>
<head>
<!-- Style to set text-element
to center -->
<style>
.center {
text-align-last: center;
border: 2px solid black;
}
</style>
</head>
<body>
<h2 style = "text-align:center">
Text is centered:
</h2>
<div class="center">
<p>
<font color="green">
GeeksForGeeks A Computer
Science Portal for Geeks
</font>
</p>
</div>
</body>
</html>
Producción:
CSS es la base de las páginas web, se utiliza para el desarrollo de páginas web mediante el diseño de sitios web y aplicaciones web. Puede aprender CSS desde cero siguiendo este tutorial de CSS y ejemplos de CSS.
Publicación traducida automáticamente
Artículo escrito por ChinkitManchanda y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA