CSS vertical-align middle ¿no funciona? Centrar verticalmente una imagen, texto, div, etc. Ejemplos (CU01043D)Aquí esta el código y después estarán las preguntas y respuestas:
Código a analizar<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><span>Línea de texto contenedor 1</span></div>
<div id="vcent"><span>Línea de texto contenedor 2</span></div>
</body>
</html>Preguntas y respuestas1)
¿Cuántas cajas contenedoras hay? ¿Están identificadas por id o por class o por ninguno de ellos? R= dos cajas contenedoras. La primera no tiene identificación pero la segunda lleva una
id.
2)
Visualiza el resultado en al menos dos navegadores distintos. ¿Qué diferencias observas entre ambos? ¿A qué crees que se deben? R= (Visualizado con
Google Chrome e
Internet Explorer) No hay diferencias. La razón es que ambos aceptan los atributos mostrados en el código. (No tengo mas navegadores
).
3)
¿Por qué el texto <<Línea de texto contenedor 2>> se muestra centrado verticalmente? R= Porque es interpretado como si fuese una celda de caja haciendo uso de
display y se le asigno una alineación vertical centrada.
4)
Modifica el código para que el texto <<Línea de texto contenedor 1>> se muestre centrado verticalmente. R= Aquí tratare de hacerlo de otra forma. El código quedaría así:
<!DOCTYPE html>
<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 style="padding-top: 105px; height: 110px"><span>Línea de texto contenedor 1</span></div>
<div id="vcent"><span>Línea de texto contenedor 2</span></div>
</body>
</html>La diferencia esta en que le he aplicado estilos de linea al primer div. aumentando el relleno y alterando su altura.
Tema: HTML y CSS. vertical-align, alineacion vertical en cajas. Ejercicio CU01043D (Leído 2348 veces)
RSS -
WAP2