Hola
Una posible solución:
Piensa que la alineación vertical css solo funciona con elementos de linea, y que tenga definida la altura de linea (line-height), ya esta altura hará de margen superior e inferior sobre la cual se alineará o posicionará.
Ahora, si defines dicha altura de linea en el div te encontrarás con que solo podrás colocar una linea (y en tu caso tienes dos debido al <br/>)
Entonces, una forma de solucionarlo es utilizar dos cajas (un div, y otra caja dentro que puede ser otro div, un p, span, etc., aplicandole la propiedad display:inline-block para que se comporte como un elemento de linea y bloque.
Al div contenedor le fijas el line-heigth igual a la altura del div, para poder alinear la caja interior con respecto a esta altura.
Luego a la caja interior, le defines como quieres que se posicione con respecto al eje y (altura): vertical-align:bottom - top - middle etc. Y vuelves a definir el line-height porque sino mantendrá el del padre (line-height:2em)
Código CSS:
Ver original.alt4 {
background-color: #31b3e7;
height: 255px;
line-height:255px; /* igual a height*/
margin-top: 5px;
text-align:center;
}
span {
border:1px solid #ddd;
display:inline-block;
line-height:2em; /*vuelves definirlo con una altura necesaria para contener el texto */
vertical-align:bottom;
}
El
ejemplo para puedas ver su funcionamiento y probar alternativas.
Saludos