El diseño en CSS se usa para controlar el flujo de un elemento dentro de otro elemento. Establece la posición del elemento en la página web. La posición del elemento se puede establecer mediante la alineación horizontal y vertical. Hay muchas maneras de establecer la posición del elemento que se enumeran a continuación:
Uso de la propiedad de posición: use la propiedad de posición en absoluto para establecer la alineación a la izquierda y a la derecha.
Sintaxis:
position: absolute;
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
CSS Layout
</title>
<style>
body{
width: 500px;
height: 150px;
border: 3px solid green;
}
#content{
position: absolute;
}
</style>
</head>
<body>
<div id="content">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<h2>CSS Layout</h2>
</div>
</body>
</html>
Producción:
Uso de la propiedad de alineación de texto: use la propiedad de alineación de texto para establecer la alineación horizontal de un elemento. La propiedad de alineación de texto se puede establecer a la izquierda, a la derecha o al centro.
Sintaxis:
text-align: center;
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
CSS Layout
</title>
<style>
body{
width: 500px;
height: 150px;
border: 3px solid green;
}
#content{
text-align: center;
}
</style>
</head>
<body>
<div id="content">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<h2>CSS Layout</h2>
</div>
</body>
</html>
Producción:
Uso de la propiedad flotante: use la propiedad flotante para establecer la alineación del elemento. El valor flotante se puede establecer a la izquierda o a la derecha.
Sintaxis:
float: right;
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
CSS Layout
</title>
<style>
body{
width: 500px;
height: 150px;
border: 3px solid green;
}
#content{
float: right;
}
</style>
</head>
<body>
<div id="content">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<h2>CSS Layout</h2>
</div>
</body>
</html>
Producción:
Utilice la propiedad de relleno horizontalmente: la propiedad de relleno se utiliza para establecer la alineación del elemento en horizontal mediante el uso de relleno izquierdo y derecho.
Sintaxis:
padding: 0 100px;
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
CSS Layout
</title>
<style>
body{
width: 500px;
height: 150px;
border: 3px solid green;
}
#content{
padding: 0 100px;
}
</style>
</head>
<body>
<div id="content">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<h2>CSS Layout</h2>
</div>
</body>
</html>
Producción:
Utilice la propiedad de relleno verticalmente: la propiedad de relleno se utiliza para establecer la alineación del elemento en vertical mediante el uso de relleno superior e inferior.
Sintaxis:
padding: 15px 0;
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
CSS Layout
</title>
<style>
body{
width: 500px;
height: 150px;
border: 3px solid green;
}
#content{
padding: 15px 0;
text-align: center;
}
</style>
</head>
<body>
<div id="content">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<h2>CSS Layout</h2>
</div>
</body>
</html>
Producción:
Propiedad de altura de línea: la altura de línea se utiliza para establecer la alineación verticalmente.
Sintaxis:
line-height: 40px;
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
CSS Layout
</title>
<style>
body {
width: 500px;
height: 150px;
border: 3px solid green;
}
#content {
line-height: 40px;
}
</style>
</head>
<body>
<div id="content">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<h2>CSS Layout</h2>
</div>
</body>
</html>
Producción:
Uso de la propiedad de margen: la propiedad de margen se usa para configurar automáticamente, alinear horizontalmente un elemento de bloque.
Sintaxis:
margin: auto;
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
CSS Layout
</title>
<style>
body {
width: 500px;
height: 150px;
border: 3px solid green;
}
#content {
margin: auto;
width: 300px;
height: 100px;
}
</style>
<head>
<body>
<div id="content">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<h2>CSS Layout</h2>
</div>
</body>
</html>
Producción:
Uso de Clearfix: si algún elemento es más alto que su elemento principal y flota, se desbordará fuera de su contenedor. El desbordamiento está configurado en automático para solucionar esto.
Sintaxis:
overflow: auto;
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
CSS Layout
</title>
<style>
body {
width: 500px;
height: 150px;
border: 3px solid green;
}
#content {
overflow: auto;
}
</style>
</head>
<body>
<div id="content">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<h2>CSS Layout</h2>
</div>
</body>
</html>
Producción:
Uso de transformación y posicionamiento: la propiedad de transformación se utiliza para transformar un elemento en relación con su elemento principal junto con la posición en absoluto.
Sintaxis:
position: absolute; transform: translate(X%, Y%);
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
CSS Layout
</title>
<style>
body {
width: 500px;
height: 150px;
border: 3px solid green;
}
#content {
position: absolute;
transform: translate(50%, 10%);
}
</style>
</head>
<body>
<div id="content">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<h2>CSS Layout</h2>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA