Centrer verticalement le contenu des pseudos élements :before et :after
Centrer verticalement un élément en CSS est parfois difficile surtout quand il s'agit de pseudos éléments tels que :before ou :after. Toutefois, grâce à la propriété flex, cela devient plus facile.
Voici un exemple simple montrant un élément aligné verticalement. Il s'agit ici d'aligner une flèche d'un tableau servant à indiquer le sens de tri d'une colonne.
th::after {
content: "↑";
position: absolute;
top: 0;
right: 0;
width: 30%;
height: 100%;
display:flex;
flex-direction:row;
align-items: center;
justify-content: center;
}
9 août 2019 - CSS
Tweet |
Commentaires
Ajouter un commentaire
0 commentaires
Rechercher
Tags
Articles récents
- React - "create-react-app command not found"
- Ruby on Rails - Vider le cache
- Ruby on Rails - Forcer une migration
- PostGreSQL - Rechercher une valeur dans toutes les tables
- PostGreSQL - Supprimer des doublons
- Regex - Supprimer les espaces entre les balises HTML
- Android Studio - Logcat n'affiche plus rien
- Retour à la ligne dans une tooltip HTML
- Centrer verticalement le contenu des pseudos élements :before et :after
- Docker – Redémarrer Apache sans stopper le container