Centralizar verticalmente o conteúdo de: before /: after pseudo-elements
Estou tentando conseguir algo semelhante a esta imagem:
Eu tenho uma imagem (como parte de uma apresentação de slides) envolvida em um div, e com: antes e: depois de pseudo-elementos, eu exibo dois controles para mover para as próximas (>>) ou anteriores (<<) imagens do slideshow .
Até agora, eu tenho isso:
div {
position: relative;
}
div:before {
display:block;
height: 100%;
content: "stuff";
position:absolute;
top: 0; left: 0;
text-align: center;
}
Eu não posso, no entanto, centrar o conteúdo dos pseudo-elementos, o texto aparece assim:
Isso é possível de alcançar? Se não, qual seria a solução mais semântica? Eu não quero centrar o elemento em si, apenas o seu conteúdo. Eu prefiro ter o elemento esticado até 100% de altura.
Editar: http://jsfiddle.net/rdy4u/
Edit2: Além disso, o img é líquido / fluido, a altura do div / img é desconhecida e a largura é definida como 800px emax-width
para 80%.