Estoy tratando de lograr algo similar a esta imagen:

Tengo una imagen (como parte de una presentación de diapositivas) envuelta en un div, y con: antes y: después de los pseudo-elementos, muestro dos controles para pasar a las siguientes (>>) o anteriores (<<) imágenes de la presentación. .

Hasta ahora, tengo esto:

div {
  position: relative;
}

div:before {
  display:block;
  height: 100%;
  content: "stuff";
  position:absolute;
  top: 0; left: 0;
  text-align: center;
}

No puedo, sin embargo, centrar el contenido de los pseudo-elementos, el texto aparece así:

¿Es esto posible lograr? Si no, ¿cuál sería la solución más semántica? No quiero centrar el elemento en sí, solo su contenido. Prefiero tener el elemento estirado a 100% de altura.

Editar: http://jsfiddle.net/rdy4u/

Edit2: Además, el img es líquido / fluido, la altura del div / img es desconocida, y el ancho se establece en 800px ymax-width al 80%.