Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: JurreNawijn en 20 de Enero 2016, 16:12
-
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>
-
Buenas JurreNawijn
Pregunta a) correcto
Pregunta b) correcto
Pregunta c) correcto, si no hubiera tenido display:table-cell no hubiera funcionado
Pregunta d) correcto se puede hacer de varias maneras una de ellas la que tú has indicado
Salu2
-
Hola!
Perdón la intromisión. Yo como JurreNawijn, solo que, centré la primera caja añadiendo al primer div el id: <div id="vcent">
Un saludo!!
Ah! entre el Firefox y el Crome no aprecio diferencia.