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

Jack_F

  • Visitante
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 :D

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;}
« Última modificación: 17 de Junio 2017, 13:48 por Alex Rodríguez »

bermartinv

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 298
    • Ver Perfil
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.

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".