web-dev-qa-db-fra.com

Centrer verticalement le contenu de: before /: after pseudo-elements

J'essaie de réaliser quelque chose de similaire à cette image:

enter image description here

J'ai une image (faisant partie d'un diaporama) encapsulée dans une div, et avec: avant et: après les pseudo-éléments, j'affiche deux commandes pour passer aux images suivantes (>>) ou précédentes (<<) du diaporama. .

Jusqu'à présent, j'ai ceci:

div {
  position: relative;
}

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

Je ne peux cependant pas centrer le contenu des pseudo-éléments, le texte apparaît comme ceci:

enter image description here

Est-ce possible à réaliser? Sinon, quelle serait la solution de contournement la plus sémantique? Je ne veux pas centrer l'élément lui-même, mais seulement son contenu. Je préférerais que l'élément soit étiré à 100% de la hauteur.

Edit:http://jsfiddle.net/rdy4u/

Edit2: De plus, img est liquide/fluide, la hauteur de div/img est inconnue et la largeur est définie sur 800px et max-width sur 80%.

csscss3css-selectorspseudo-element
48
dcastro

En supposant que votre élément ne soit pas un <img> (car les pseudo-éléments ne sont pas autorisés sur les éléments à fermeture automatique), supposons que ce soit un <div>, de sorte qu'un moyen pourrait être:

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

Si vous ne pouvez pas changer la hauteur de ligne de la div, vous pouvez également:

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

Sinon, placez les indicateurs comme arrière-plan en position centrale.

70
fcalderan

Utiliser flex dans les CSS du pseudo-élément est assez simple:

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

voir https://jsfiddle.net/w408o7cq/

17
david

Vous pouvez le faire sans recourir aux images. (Parfois, vous ne pouvez pas, par exemple, utiliser des icônes de police dans: before ou: 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: ">>";
}

Il est vrai que l'utilisation de 20000px est un peu effrontée. Si votre div sera un peu plus grand, augmentez simplement le px.

Dans votre cas, vous avez une image à l'intérieur du div, alors frappez cette image avec display: block (les images ne sont pas affichées par défaut: block)

Voici le violon mis à jour pour votre cas particulier. http://jsfiddle.net/rdy4u/56/

2
galeaspablo

Voici un moyen de créer des contrôles suivants et précédents en utilisant: les pseudo-éléments before et: after. Avec astuce de frontière pour créer des triangles pour les boutons précédent/suivant. Cela ne vous donne pas une surface de 100% de hauteur sur laquelle cliquer, mais si vous donnez au triangle (flèches) une taille suffisante, il devrait compenser cela.

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

Voici le code qui fonctionne: http://jsfiddle.net/fiddleriddler/rPPMf/

1
user3083754

Je sais que je suis en retard pour la fête, mais cette solution simple et flexible fonctionnait à merveille au cas où cela aiderait l'un de vous.

.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 */
}
0
Ken

En utilisant flex box, vous devez d'abord définir une largeur et une hauteur fixes dans le parent.

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