Autor Tema: CSS y HTML vertical-align middle no funciona? Cómo centrar en vertical CU01043D (Leído 2624 veces)

Jack_F · « **en:** 10 de Abril 2017, 20:36 »

Hola amigos como estan espero que bien, aqui traigo este ejercicio para me digan si estoy en lo correto. Ejercicio CU01043D del taller de fundamentos de programación web con CSS.

Gracias

Citar

EJERCICIO
Analiza el siguiente código, visualiza su resultado y responde a las preguntas:

Código: [Seleccionar]

<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;}
#cent{display: table;}
#cent span{vertical-align: middle; display: table-cell;}

</style>
</head>
<body>
<div id="cent"><span>Línea de texto contenedor 1</span></div>
<div id="vcent"><span>Línea de texto contenedor 2</span></div>
</body>
</html>

Citar

Preguntas:

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.

Respuestas:

a) Hay dos cajas contenedoras y sola una de ellas esta indentificado por id, y es la caja2.

b) Bueno probe con google chrome y internet explore y los resultados son iguales.

c) Porque la caja contenedora paso de una caja en tabla, y el span, por lo tanto aplicando la propiedad vertical-align no tiene ningun problema con las tablas se centra perfecto

d) El HTML lo puse asi:

Código: [Seleccionar]

<div id="cent"><span>Línea de texto contenedor 1</span></div> y el CSS asi:

Código: [Seleccionar]

#cent span{vertical-align: middle; display: table-cell;}

bermartinv · « **Respuesta #1 en:** 11 de Abril 2017, 10:09 »

Está bien resuelto,
fijate que en vez de definir un nuevo id podíamos haber modifciado el id por class, y definir las características para ambos de una vez.Es otra forma de hacerlo, y una forma que a la hora de escribir código recorta tiempo de escribir.
Saludos.

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: