Buenas buenas!!!! dejo mis respuestas!!! Ejercicio resuelto CU01043D del tutorial básico de desarrollo web.
noto...
(pedro entenderá)
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.
Respuestasa) Veo 2 cajas contenedoras, una de ellas identificadas por ID
b) En mi caso lo probé con IE - Firefox - Chrome (todos actualizados a la ultima versión disponible y con un zoom de 100% en todos los casos) y el único cambio que noté es que Chrome me muestra un poco mas oscuros los bordes y el texto.
c) Está centrado por la propiedad
display:table-cell, la cual esta afectada por por la propiedad
vertical-align:middled)Para centrar el texto <<Línea de texto contenedor 1>> elimine el identificador ID y use un class que afecte a los 2 div de la misma manera. Mi código modificado es este
CU01043D.html
<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 class="vcent"><span>Línea de texto contenedor 1</span></div>
<div class="vcent"><span>Línea de texto contenedor 2</span></div>
</body>
</html>
Tema: HTML y CSS vertical-align middle diferencias entre IE, Firefox, Chrome CU01043D (Leído 2132 veces)
RSS -
WAP2