Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: EnigmaticNerd en 16 de Septiembre 2017, 01:11
-
Buenas noches. Este es el enunciado del ejercicio CU01043D del tutorial de programación web desde cero con CSS:
Analiza el siguiente código, visualiza su resultado y responde a las preguntas:
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<style type="text/css">
*{font-family: arial; }
div { width: 360px; height: 210px; margin: 10px; padding:5px 20px;
border-style: solid; border-color: red; border-width: thin;
background-color: yellow; text-align: center; float: left;}
#vcent { display: table; }
#vcent span { display: table-cell; vertical-align:middle;}
</style>
</head>
<body>
<div><span>Línea de texto contenedor 1</span></div>
<div id="vcent"><span>Línea de texto contenedor 2</span></div>
</body>
</html>
a) ¿Cuántas cajas contenedoras hay? ¿Están identificadas por id o por class o por ninguno de ellos?
b) Visualiza el resultado en al menos dos navegadores distintos. ¿Qué diferencias observas entre ambos? ¿A qué crees que se deben?
c) ¿Por qué el texto <<Línea de texto contenedor 2>> se muestra centrado verticalmente?
d) Modifica el código para que el texto <<Línea de texto contenedor 1>> se muestre centrado verticalmente.
Acá las respuestas:
R.a) Hay dos cajas contenedoras y la segunda está identificada por id.
R.b) Las pruebas se realizaron en chromium y firefox; no presentó diferencias.
R.c) Utilizando la propiedad vertical-align con el valor middle, el elemento se centra como si de la celda de una tabla se tratara. El atributo span se visualiza como si fuese la celda de una tabla, gracias a los valores table y table-cell de la propiedad display.
R.d)
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<style type="text/css">
*{font-family: arial; }
div { width: 360px; height: 210px; margin: 10px; padding:5px 20px;
border-style: solid; border-color: red; border-width: thin;
background-color: yellow; text-align: center; float: left;}
#vcent { display: table; }
#vcent span { display: table-cell; vertical-align:middle;}
div:first-child{
display:table;
}
div:first-child span{
display:table-cell; vertical-align:middle;
}
</style>
</head>
<body>
<div><span>Línea de texto contenedor 1</span></div>
<div id="vcent"><span>Línea de texto contenedor 2</span></div>
</body>
</html>
Si tienen correcciones o sugerencias, se las agradeceré enormemente. Gracias.
-
Hola EnigmaticNerd, respuestas correctas y el código cumple lo que se pedía, aunque se presenta una duplicidad de código css en este fragmento:
#vcent { display: table; }
#vcent span { display: table-cell; vertical-align:middle;}
div:first-child{
display:table;
}
div:first-child span{
display:table-cell; vertical-align:middle;
}
Para evitar esa duplicidad puede plantearse una solución aplicando clases css como en este hilo: https://www.aprenderaprogramar.com/foros/index.php?topic=3778.0
Saludos