Autor Tema: CSS cómo centrar verticalmente un texto dentro de un div vertical-align CU01043D (Leído 2168 veces)

Dimitar Stefanov · « **en:** 16 de Enero 2016, 14:24 »

Código del ejercicio CU01043D del curso CSS desde cero (respuestas están dentro del código como comentarios).

Código HTML:

Código: [Seleccionar]

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>Portal web</title>
	<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, #caja1 {
	display: table;
	}
	#vcent span, #caja1 span {
	display: table-cell;
	vertical-align: middle;
	}
	</style>
</head>
<body>
	<div id="caja1"><span>Línea de texto contenedor 1</span></div>
	<div id="vcent"><span>Línea de texto contenedor 2</span></div>
</body>
</html>

<!-- Hay 2 cajas contenedoras identificada sólo una de ella por id. -->
<!-- En mi caso, no se observa ninguna diferencia en los dos navegadores que he visualizado el código. Si se diera el caso de que se hubieran visto diferente, se debería a los propiedades por defecto de los navegadores que no hemos especificado nosotros en el código. -->
<!--  -->
<!-- La línea <<Línea de texto contenedor>> se muestra centrada porque es un elemento dentro de una tabla y le afecta la propiedad vertical-align. -->
<!-- Para que se mostrara igual la Línea de texto contenedor 1 como la Línea de texto contenedor 2 tan sólo tenemos que hacer los siguientes cámbios:
<div> (del primer contenedor) le tendremos que identificar por un id, en mi caso lo identifico como: id="caja1" y luego añadirlo en el script de arriba (tal y como está en el código más arriba). -->

Ogramar · « **Respuesta #1 en:** 19 de Enero 2016, 11:22 »

Buenas dimiste,

Citar

Pregunta a):

Hay 2 cajas contenedoras identificada sólo una de ella por id.

Pregunta b)

En mi caso, no se observa ninguna diferencia en los dos navegadores que he visualizado el código. Si se diera el caso de que se hubieran visto diferente, se debería a los propiedades por defecto de los navegadores que no hemos especificado nosotros en el código.

Pregunta c)
La línea <<Línea de texto contenedor>> se muestra centrada porque es un elemento dentro de una tabla y le afecta la propiedad vertical-align.

Pregunta d)

Para que se mostrara igual la Línea de texto contenedor 1 como la Línea de texto contenedor 2 tan sólo tenemos que hacer los siguientes cámbios:
<div> (del primer contenedor) le tendremos que identificar por un id, en mi caso lo identifico como: id="caja1" y luego añadirlo en el script de arriba (tal y como está en el código más arriba).

Pregunta a): correcto

Para la pregunta b): las diferencias también pueden deberse a que distintos navegadores respondan de distinta manera, incluso siendo el mismo código. O a que algunos navegadores reconozcan cierto código que sin embargo otros no reconozcan.

Pregunta c): no es una tabla propiamente dicha, sino un elemento que tiene establecida la propiedad display como table-cell y se comporta como si fuera una celda de una tabla y por ello le afecta vertical-align tal como comentas

Pregunta d): correcto

Salu2

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: