Contenido centrado verticalmente de:antes/: después de pseudo-elementos

Estoy tratando de lograr algo similar a esta imagen:

introduzca la descripción de la imagen aquí

Tengo una imagen (como parte de una presentación de diapositivas) envuelta en un div, y con pseudo-elementos :before y :after, muestro dos controles para pasar a las imágenes siguientes (>>) o anteriores (

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í:

introduzca la descripción de la imagen aquí

¿Es posible lograr esto? Si no, ¿cuál sería la solución más semántica? No quiero centrar el elemento en sí, solo su contenido. Preferiría tener el elemento estirado al 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 y max-width en 80%.

Author: dcastro, 2013-01-25
Source

5 answers

Suponiendo que su elemento no es un <img> (porque los pseudo elementos no están permitidos en los elementos de cierre automático), supongamos que es un <div>, por lo que una forma podría ser: 

div {
    height: 100px ;
    line-height: 100px;
}
div:before, div:after {
    content: "";
    ...
    display: inline-block;
    vertical-align: middle;
    height: ...;
    line-height: normal;
}

Si no puede cambiar la altura de la línea del div, otra forma es: 

div {
    position: relative;
}
div:before, div:after {
    position: absolute;
    display: block;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    content: "";
    width: ...
}

De lo contrario, simplemente coloque los indicadores como fondo en la posición central.

 62
Author: fcalderan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-08-18 06:30:17

Usando flex en el css del pseudo elemento es bastante fácil: 

.parent::after {
  content: "Pseudo child text";
  position: absolute;
  top: 0;
  right: 0;
  width: 30%;
  height: 100%;
  border: 1px solid red;
  display:flex;
  flex-direction:row;
  align-items: center;
  justify-content: center;
}

Véase https://jsfiddle.net/w408o7cq /

 13
Author: david,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-09-12 13:29:34

Puedes hacer esto sin recurrir a imágenes. (A veces no se puede, por ejemplo, usar iconos de fuente dentro de: before o: after).

div {
   position: relative;
   overflow:hidden;
}

div:before, div:after {
   position: absolute;
   display: block;
   top: 50%;
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);

   height:20000px;
   line-height:20000px;

   content: ">>";
}

Es cierto que es un poco descarado usar 20000px Si su div alguna vez será más grande que eso, simplemente aumente el px.

En su caso, tiene una imagen dentro del div, así que golpee esa imagen con display: block (images don't default to display:block)

Aquí está el violín actualizado para su caso particular. http://jsfiddle.net/rdy4u/56 /

 2
Author: galeaspablo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-06-23 19:53:44

Aquí hay una forma de crear controles next y previous, usando pseudo-elementos :before y :after. Junto con truco borde para crear triángulos para botones anterior / siguiente. No te da un área 100% de altura para hacer clic, pero si haces que el triángulo (flechas) sea lo suficientemente grande, debería compensarlo.

div {
  position: relative;
  width: 800px;
  max-width: 80%;
  border: 1px solid red;
  text-align: center;
  margin: 0 auto;
}

div:before, div:after {
  opacity: 0.5;
  display:block;
  content: "";
  position:absolute;
  width: 0; 
  height: 0;
  }

div:before {
  top: 40%; left: 0;
  border-top: 25px solid transparent; 
  border-right: 50px solid blue; 
  border-bottom: 25px solid transparent;
}

div:after {
  top: 40%; right: 0;
  border-top: 25px solid transparent; 
  border-left: 50px solid blue; 
  border-bottom: 25px solid transparent;
}

Aquí está el código funcionando: http://jsfiddle.net/fiddleriddler/rPPMf /

 1
Author: user3083754,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-12-09 17:25:17

Usando flex box, debe establecer un ancho y un alto fijos en el padre primero y luego

div::after {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
 0
Author: Alaeddine,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-09-25 20:38:40