Buenas noches amigos aquí os dejo el ejercicio haber que os parece. gracias
saludos
<!DOCTYPE html>
<html lang="es">
<head>
<title>portal web aprenderaprogramar.com</title>
<meta charset="utf-8">
<style>
*{font-family: arial;}
div{
width: 360px;
height: 210px;
margin: 10px;
margin: 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 id="vcent"><span>Linea de texto contenedor 1</span></div>
<div id="vcent"><span>Linea de texto contenedor 2</span></div>
</body>
</html>
Y ahora las preguntas....
Ejercicio CU01043D del curso CSS
a) ¿Cuántas cajas contenedoras hay? ¿Están identificadas por id o por class o por ninguno de ellos?
Respuesta:
Hay dos cajas contenedoras. Están identificadas por id.
b) Visualiza el resultado en al menos dos navegadores distintos. ¿Qué diferencias observas entre ambos? ¿A qué crees que se deben?
Respuesta:
Lo he visualizado en tres navegadores y en los tres el resultado es bueno, se ve igual en los tres se bien en firefox, crome
e internet explorer.
c) ¿Por qué el texto <<Línea de texto contenedor 2>> se muestra centrado verticalmente?
Respuesta:
porque en ese contenedor tiene el atributo vertical-aling: middle.
#vcent span { display: table-cell; vertical-align:middle;}
d) Modifica el código para que el texto <<Línea de texto contenedor 1>> se muestre centrado verticalmente.
Respuesta:
hay que poner en en html un atributo id en el contenedor vcent del contenedor 1.
<div id="vcent"><span>Linea de texto contenedor 1</span></div>
Tema: curso css vertical-alling middle el atributo id no puede repetirse CU01043D (Leído 2371 veces)
RSS -
WAP2