Centrowanie pionowe zawartości pseudoelementów: before/: after

Staram się osiągnąć coś podobnego do tego zdjęcia:

Tutaj wpisz opis obrazka

Mam obraz (jako część pokazu slajdów) zawinięty w div I z pseudoelementami :before I :after, wyświetlam dwie kontrolki, aby przejść do następnego ( > > ) lub poprzedniego (

Jak na razie mam to: 

div {
  position: relative;
}

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

Nie mogę jednak wyśrodkować treści pseudoelementów, tekst wygląda tak:

Tutaj wpisz opis obrazka

Czy jest to możliwe do osiągnięcia? Jeśli nie, jakie byłoby najbardziej semantyczne obejście? Nie chcę wyśrodkowywać samego elementu, tylko jego treść. Wolałbym, aby element rozciągnął się na 100% wysokości.

Edytuj: http://jsfiddle.net/rdy4u/

Edit2: również img jest cieczą / płynem, wysokość div / img nie jest znana, a szerokość jest ustawiona na 800px i max-width na 80%.

Author: dcastro, 2013-01-25
Source

5 answers

Zakładając, że twój element nie jest <img> (ponieważ pseudoelementy nie są dozwolone na elementach samozamykających się), Załóżmy, że jest to <div>, więc sposobem może być: 

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

Jeśli nie możesz zmienić wysokości linii div, innym sposobem jest: 

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

W przeciwnym razie po prostu umieść wskaźniki jako tło w pozycji środkowej.

 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/doraprojects.net/template/agent.layouts/content.php on line 54
2016-08-18 06:30:17

Użycie flex w CSS pseudo elementu jest dość proste: 

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

Zobacz 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/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-12 13:29:34

Możesz to zrobić bez uciekania się do obrazów. (czasami nie można, np. używając ikon czcionek wewnątrz :before lub: 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: ">>";
}

Przyznaję, że używanie 20000px jest trochę bezczelne, jeśli twój div będzie kiedykolwiek większy, po prostu zwiększ px.

W Twoim przypadku, masz obraz wewnątrz div, więc Naciśnij ten obraz z display: block (obrazy nie domyślnie wyświetlają:block)

Oto zaktualizowane skrzypce do twojej konkretnej sprawy. 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/doraprojects.net/template/agent.layouts/content.php on line 54
2016-06-23 19:53:44

Oto sposób tworzenia kontrolek next i previous, używając pseudoelementów: before I: after. Wraz z obramowaniem do tworzenia trójkątów dla przycisków poprzedni/następny. Nie daje obszaru 100% wysokości, aby kliknąć, ale jeśli zrobisz Trójkąt (strzałki) wystarczająco duży rozmiar, powinien to nadrobić.

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

Tutaj działa kod: 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/doraprojects.net/template/agent.layouts/content.php on line 54
2013-12-09 17:25:17

Używając flex box, powinieneś najpierw ustawić stałą szerokość i wysokość w rodzicu 

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/doraprojects.net/template/agent.layouts/content.php on line 54
2018-09-25 20:38:40