J'ai toujours lu que pour centrer un texte verticalement dans une zone, il fallait lui attribuer un line-height égal au height de la zone. Pourtant, j'ai ici un texte de titre <h1> qui s'affiche tout en bas de la zone de la balise (c'est visible avec les outils de développement du navigateur, qui mettent en évidence la zone des balises). Voici mon CSS :
Cela contredit ce que j'ai appris.
C'est assez agaçant. Comment faire ? J'ai inséré une image à côté du texte, (avant le texte), à l'intérieur de la même balise. L'image est donc plus surélevée que le texte.
Si je fais un padding-bottom, par exemple, les deux éléments vont partir vers le haut, et ce n'est pas le but recherché...
h1{
height: 64px;
line-height: 64px;
text-align: center;
font-family: 'Century Gothic', 'Comic Sans MS', cursive;
font-weight: normal;
font-style: italic;
font-size: 3rem;
color: rgba(255,255,255,0.7);
text-shadow: 5px 5px 8px rgba(0, 0, 50, .5);
}Cela contredit ce que j'ai appris.
C'est assez agaçant. Comment faire ? J'ai inséré une image à côté du texte, (avant le texte), à l'intérieur de la même balise. L'image est donc plus surélevée que le texte.
Si je fais un padding-bottom, par exemple, les deux éléments vont partir vers le haut, et ce n'est pas le but recherché...