Verticaal centreren van inhoud van :before/:after pseudo-elementen

Ik probeer iets te bereiken dat lijkt op deze foto:

Ik heb een afbeelding (als onderdeel van een diavoorstelling) verpakt in een div, en met :before en :after pseudo-elementen, geef ik twee bedieningselementen weer om naar de volgende (>>) of vorige (< <) afbeeldingen van de diavoorstelling.

Tot nu toe heb ik dit:

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

Ik kan de inhoud van de pseudo-elementen echter niet centreren, de tekst ziet er als volgt uit:

Is dit mogelijk? Zo niet, wat zou dan de meest semantische oplossing zijn?
Ik wil het element zelf niet centreren, alleen de inhoud ervan. Ik heb liever dat het element wordt uitgerekt tot 100% hoogte.

Bewerken:http://jsfiddle.net/rdy4u/

Edit2:de img is ook vloeibaar/vloeibaar, de hoogte van de div/img is onbekend en de breedte is ingesteld op 800px en max-widthom 80%.

Antwoord 1, autoriteit 100%

Ervan uitgaande dat uw element geen <img>is (omdat pseudo-elementen niet zijn toegestaan ​​op zelfsluitende elementen), laten we aannemen dat het een <div>is, dus een manier zou kunnen zijn:

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

Als u de regelhoogte van de div niet kunt wijzigen, is een andere manier:

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

Anders plaatst u de indicatoren gewoon als achtergrond in het midden.

Antwoord 2, autoriteit 38%

Het gebruik van flex in de css van het pseudo-element is vrij eenvoudig:

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

zie https://jsfiddle.net/w408o7cq/

Antwoord 3, autoriteit 8%

Als u flexbox gebruikt, moet u eerst een vaste breedte en hoogte in de bovenliggende kolom instellen

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

Antwoord 4, autoriteit 4%

Ik weet dat ik te laat ben voor het feest, maar deze eenvoudige flexibele oplossing werkte als een tierelier voor het geval jullie er iets aan hebben.

.main-div {
    display: flex;
    align-items: center;
}
.my-div-name:before, .my-div-name:after {
    /* This content will be vertically centered with the attributes of the main-div */
}

Antwoord 5, autoriteit 3%

U kunt dit doen zonder uw toevlucht te nemen tot afbeeldingen.(Soms kunt u dat niet, bijvoorbeeld door lettertypepictogrammen in :before of :after te gebruiken).

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

Toegegeven, het is een beetje brutaal om 20000px te gebruiken. Als je div ooit groter zal zijn, verhoog dan gewoon de px.

In jouw geval heb je een afbeelding in de div, dus druk op die afbeelding met display:block(afbeeldingen worden standaard niet weergegeven:block)

Hier is de bijgewerkte viool voor uw specifieke geval. http://jsfiddle.net/rdy4u/56/

Antwoord 6

Hier is een manier om volgende en vorige besturingselementen te maken, met behulp van :before en :after pseudo-elementen. Samen met randtruc om driehoeken te maken voor vorige/volgende knoppen. Het geeft je geen gebied van 100% hoogte om op te klikken, maar als je de driehoek (pijlen) groot genoeg maakt, zou het dat moeten compenseren.

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

Hier werkt de code: http://jsfiddle.net/fiddleriddler/rPPMf/