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.
Tema: HTML y CSS cómo centrar texto verticalmente en un div Vertical-align CU01043D (Leído 2309 veces)
RSS -
WAP2