Respuestas para ejercicios de entrega CU01043D del curso de programación web co CSS:
a) ¿Cuántas cajas contenedoras hay? ¿Están identificadas por id o por class o por ninguno de ellos?
R: Hay dos cajas contenedoras, lo cual unas de ellas está identificada por una id y la otra no.
b) Visualiza el resultado en al menos dos navegadores distintos. ¿Qué diferencias observas entre ambos? ¿A qué crees que se deben?
R: En mi caso, probé con Microsoft Edge y Google Chrome. Pude notar que los dos contenedores en Edge se movieron un poco hacia arriba pero esto es debido a que la barra de menú de ambos navegadores tienen diferentes tamaños.
c) ¿Por qué el texto <<Línea de texto contenedor 2>> se muestra centrado verticalmente?
R: En el css, se le asignó la propiedad display:table-cell que hará que el div se comporte como una celda de tabla y la propiedad vertical-align:middle se encarga de centrar verticalmente el texto que esta dentro de las etiquetas <span> ya que esta propiedad afecta a contenidos inline como lo son las etiquetas <span>
d) Modifica el código para que el texto <<Línea de texto contenedor 1>> se muestre centrado verticalmente.
R: Es muy sencillo, solo hay que cambiar el atributo id tanto en el css como en el html por una class y en el primer contenedor agregar el atributo class="vcent" creando como resultado final que el texto dentro del contenedor 1 se centre.
<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: CSS display table-cell Centrar verticalmente imagen, texto Ejercicio CU01043D# (Leído 3584 veces)
RSS -
WAP2