css - ejemplos - Centrado verticalmente contenido de: antes/: después de pseudo-elementos

pseudo elementos css ejemplos

Question

Estoy tratando de lograr algo similar a esta imagen:

Tengo una imagen (como parte de una presentación) 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, se desconoce la altura del div / img, y el ancho se establece en 800px y max-width en 80%.

Answer 1

Esta es una forma de crear controles siguientes y anteriores, utilizando: antes y: después de pseudo-elementos. Junto con truco de borde para crear triángulos para los botones anterior / siguiente. No le da un área de 100% de altura para hacer clic, pero si hace que el triángulo (flechas) tenga un tamaño 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 que funciona: http://jsfiddle.net/fiddleriddler/rPPMf/

Answer 2

Si sabe el tamaño que desea, puede usarlo! Importante. Siempre y cuando sepas el tamaño del elemento y no estés usando! Importante en el elemento, debería estar bien.

element {
  line-height : 110%;
}

element::before {
  content : "HI";
  line-height : 40px !important;
  vertical-align : middle;
}

Answer 3

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 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.

Answer 4

Usando el cuadro de flexión, primero debe establecer un ancho y una altura fijos en el padre

div::after {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

Answer 5

Usar flex en el css del pseudo elemento es bastante sencillo:

.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;
}

vea https://jsfiddle.net/w408o7cq/

Answer 6

Puedes hacer esto sin tener que recurrir a imágenes. (A veces no puede, por ejemplo, usar iconos de fuente dentro: antes o: después).

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 utilizar 20000px. Si tu división alguna vez será más grande que eso, simplemente aumenta la px.

En su caso, tiene una imagen dentro del div, así que golpee esa imagen con display: block (las imágenes no se muestran por defecto: block)

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