Hay tres formas de resolver este problema que se enumeran a continuación:
- Por caso predeterminado
- Usando la propiedad de bloque en línea
- Usando la propiedad de ajuste de contenido en ancho y alto
Caso predeterminado: HTML div se ajusta de manera predeterminada al contenido dentro de él. El ejemplo va así:
Ejemplo 1:
html
<!DOCTYPE html>
<html lang = "en" dir = "ltr">
<head>
<meta charset = "utf-8">
<title>GeeksforGeeks Example</title>
<!--CSS Code-->
<style media = "screen">
body {
background: orange;
overflow: hidden;
color: white;
}
.GeeksForGeeks {
text-align: center;
background: dodgerblue;
position: absolute;
top: 50%;
left: 1%;
right: 1%;
}
</style>
</head>
<body>
<!-- HTML Code -->
<h1 style = "color:forestgreen; top:35%;
left: 35%; position:absolute; ">
Geeks For Geeks
</h1>
<div class = "GeeksForGeeks">
Cascading Style Sheets, fondly referred
to as CSS, is a simply designed language
intended to simplify the process of
making web pages presentable. CSS allows
you to apply styles to web pages. More
importantly, CSS enables you to do this
independent of the HTML that makes up
each web page.
</div>
</body>
</html>
Producción:
Uso de la propiedad de bloque en línea: use la propiedad display: inline-block para establecer un tamaño div de acuerdo con su contenido.
Ejemplo 2:
html
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>GeeksforGeeks Example</title>
<!--CSS Code-->
<style media = "screen">
body {
background: violet;
overflow: auto;
color: white;
}
.GeeksForGeeks {
text-align: center;
background: dodgerblue;
position: absolute;
display: inline-block;
left: 1%;
right: 1%;
top: 50%;
}
</style>
</head>
<body>
<!-- HTML Code -->
<h1 style="color: forestgreen;
top: 35%; left: 35%; position: absolute;">
Geeks For Geeks
</h1>
<div class="GeeksForGeeks">
Cascading Style Sheets, fondly referred
to as CSS, is a simply designed language
intended to simplify the process of
making web pages presentable. CSS allows
you to apply styles to web pages. More
importantly, CSS enables you to do this
independent of the HTML that makes up
each web page.
</div>
</body>
</html>
Producción:
Uso de la propiedad de contenido de ajuste en ancho y alto: en este método, establecemos la propiedad de ancho y alto en el valor de contenido de ajuste. Ejemplo 3:
html
<!DOCTYPE html>
<html lang = "en" dir = "ltr">
<head>
<meta charset = "utf-8">
<title>Geeks for Geeks Example</title>
<!--CSS Code-->
<style media = "screen">
body {
background: tomato;
overflow: hidden;
color: white;
}
.GeeksForGeeks {
background: crimson;
position: absolute;
width:fit-content;
height:fit-content;
left: 0;
top: 50%;
}
</style>
</head>
<body>
<!-- HTML Code -->
<h1 style = "color: lime; top: 35%;
left: 35%; position: absolute;">
Geeks For Geeks
</h1>
<div class = "GeeksForGeeks">
Cascading Style Sheets, fondly referred
to as CSS, is a simply designed language
intended to simplify the process of
making web pages presentable. CSS allows
you to apply styles to web pages. More
importantly, CSS enables you to do this
independent of the HTML that makes up
each web page.
</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 aditya_taparia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA