Código del ejercicio CU01043D del curso CSS desde cero (respuestas están dentro del código como comentarios).
Código HTML:
<!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). -->