Comment aligner le texte verticalement au centre d’une DIV avec CSS
Si vous essayez d’aligner le texte dans une div en utilisant la règle CSS vertical-align: middle; cela ne fonctionne pas. Supposons que vous ayez un élément div avec une hauteur de 30px et que vous ayez placé un texte dans le div que vous souhaitez aligner verticalement au centre. La façon la plus simple de le faire est d’appliquez simplement la propriété line-height avec une valeur égale à la hauteur de div qui est 30px.
Code source :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Aligner le texte verticalement au centre d'une DIV avec CSS</title>
<style type="text/css">
.box{
height: 30px;
line-height: 30px;
padding: 15px;
border: 2px solid #000;
}
</style>
</head>
<body>
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</body>
</html>
| Résultat |
|---|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
- Comment remplacer le Checkbox par un icone fontawesome
- Comment empêcher le redimensionnement d’un textarea en CSS
- Comment créer deux div côte à côte de la même hauteur en CSS
- Comment supprimer l’espace entre les cellules d’une colonne d’un tableau en CSS
- Comment placer une bordure à l’intérieur d’un bloc div en CSS
- Comment changer une image au survol avec CSS
- Comment rendre une DIV modifiable en HTML
- Comment changer la couleur du texte au survol en CSS
- Comment ajouter l’ombre sur un texte en CSS
- Comment ajouter l’ombre aux éléments HTML en CSS
- Comment créer un curseur personnalisé avec CSS
- Comment afficher du texte sur une image avec HTML / CSS
- Comment créer un lien avec un bouton HTML
- Comment supprimer l’espace blanc sous une image avec CSS
- Comment changer la transparence du background sans affecter le texte
- Comment créer une ligne verticale en HTML
- Comment changer l’aspect du curseur en CSS
- Comment redimensionner automatiquement une image pour l’adapter à un bloc DIV avec CSS
- Comment changer la couleur de la balise HR avec CSS
- Comment aligner un bloc DIV horizontalement avec CSS
- Comment définir la hauteur d’une DIV à 100% avec CSS
- Comment aligner le texte verticalement au centre d’une DIV avec CSS
- Comment ajuster la taille d’une div à son contenu en CSS
- Comment créer une liste sans puces en HTML
- Comment superposer une div sur une autre div avec CSS
- Comment redimensionner une image en background avec CSS
- Comment désactiver un lien en utilisant uniquement CSS
- Comment aligner verticalement une image dans une DIV en CSS
- Comment écrire des commentaires en CSS
- Comment écrire des commentaires en HTML
- Changer le bouton parcourir d’un input de type file avec CSS
- Personnaliser la balise select avec CSS
- Personnaliser les boutons checkbox avec CSS
- Personnaliser les boutons radio avec CSS
QCMs qui pourraient vous intéresser :
- Questions techniques sur MYSQL
- QCM MySQL Corrigé – Optimisation de requêtes
- QCM Base de données avec correction
- QCM sur PHP
- QCM Symfony
- QCM AngularJS
- QCM React
- QCM HTML / CSS
- QCM Java – Programmation Orientée Objet
- QCM Python
- QCM Cloud Computing
- QCM Framework Spring
- QCM Javascript
- QCM jQuery
- QCM Oracle
- QCM sur GIT – Gestionnaire de version
- QCM Linux – Gestion de processus
- QCM Réseau
- QCM Architecture des ordinateurs
- QCM Securité informatique
- QCM En Informatique Générale
- QCM en C
- QCM en C#
- QCM sur l'algorithmique
- QCM Word
- QCM Excel
- QCM PowerPoint
- QCM Access
THANK YOU very Nice website article