Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: Chompy129 en 19 de Septiembre 2016, 20:27
-
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 respuestas
1) ¿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 :P).
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.
-
Hola Chompy129.
1) bien.
2) bien.
3) bien, porque la caja que contiene el texto tiene establecida la propiedad "display:table-cell" y a su vez el elemento padre de esta tiene establecida la propiedad "display:table".
4) bien, como bien especifica el tema, hay muchas formas de centrar verticalmente, y esta es una de ellas.
Saludos. ;D