CSS, centrage vertical Résolu

Question

Bonjour,

En CSS, j'ai créé une classe pour la balise a, pour les liens renvoyant vers un fichier pdf. Le code est en dessous. En gros, j'ai mis en arrière plan une image d'un fichier pdf qui fait 40px de haut et je décale le texte de 50px vers la gauche pour qu'il soit à coté. Le problème c'est que je voudrais que le texte soit centré verticalement par rapport à l'image de mon pdf. J'ai réussi en trichant un peu en mettant une hauteur de ligne de 40px. Donc ça marchait bien jusqu'au jour ou le texte à coté du pdf n'a plus tenu sur une ligne. 


a.pdf {
	margin:10px 0 10px 0;
	padding: 0 0 0 50px;
	text-decoration:none;
	display: block;
	line-height:40px;
	min-height:40px;
	color:#444444;
	background-image:url(img/icon_pdf_transp.png);
	background-repeat:no-repeat;
	background-position:top left;
}

a.pdf:hover {
	color:#5757EA;
	background-image:url(img/icon_pdf.png);
	background-repeat:no-repeat;
	background-position:top left;
	background-color:#DDDDDD;
}


Pour voir le résultat vous pouvez aller ici :

https://www.sfr.fr/fermeture-des-pages-perso.html

Le problème se manifeste au niveau de la deuxième publications.

Merci

zoby44 · Answer

Salut, essaye en remplacent :
background-position:top left;
par 
background-position:top center;
Ça fonctionne chez moi.

M@dien · Answer

Bonjour,

en modifiant le css comme ça, ça fonctionne:
a.pdf {
	margin:10px 0 10px 0;
	padding: 12px 0px 12px 50px; /* padding en haut et en bas pour afficher toute l'image */
	text-decoration:none;
	display: block;
	/* line-height:40px; on supprime */
	/* min-height:40px; on supprime, au profit du padding */
	color:#444444;
	background-image:url(img/icon_pdf_transp.png);
	background-repeat:no-repeat;
	background-position:left center; /* center au lieu de top et c'est au mileu =) */
}

a.pdf:hover {
	color:#5757EA;
	background-image:url(img/icon_pdf.png);
	background-repeat:no-repeat;
	background-position:left center; /* center au lieu de top et c'est au mileu =) */
	background-color:#DDDDDD;
}

ladgalen · Answer

Super ça marche.

Mais je ne comprend pas le coup du padding de 12px !!!!

12 en haut, 12 en bas ça fait 24 et la ligne fait 16 par défaut ? du coup on retrouve le 40px de haut de mon image.

Merci

M@dien · Answer

Tout à fait. la ligne prend 16~17px de hauteur, et le padding augmente la hauteur totale à 40~41px. et si on passe d'une ligne, on est à 56~57px de haut, au lieu de 80px si on garde le line-height:40px;

Après c'est un choix.

CSS, centrage vertical

4 réponses

Votre réponse

Discussions similaires