CSS, centrage vertical

Résolu
ladgalen Messages postés 143 Date d'inscription   Statut Membre Dernière intervention   -  
M@dien Messages postés 437 Date d'inscription   Statut Membre Dernière intervention   -
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

4 réponses

Réponse 1 / 4
zoby44 Messages postés 818 Date d'inscription   Statut Membre Dernière intervention   199
 
Salut, essaye en remplacent : 
background-position:top left;

par 
background-position:top center;

Ça fonctionne chez moi.
0
Réponse 2 / 4
M@dien Messages postés 437 Date d'inscription   Statut Membre Dernière intervention   74
 
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;
}
0
Réponse 3 / 4
ladgalen Messages postés 143 Date d'inscription   Statut Membre Dernière intervention   10
 
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
0
Réponse 4 / 4
M@dien Messages postés 437 Date d'inscription   Statut Membre Dernière intervention   74
 
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.
0

Discussions similaires

Barre verticale droite sur clavier
k_lou -
Leuide -

41 réponses
le signe " | " dans excel
zed -
Utilisateur anonyme -

4 réponses
Touche du clavier barre verticale
k_lou -
Architecte_300 -

6 réponses
Problème écran tv Samsung bandes verticales
Guig07 -
txiki -

4 réponses
svp faire une barre verticale avec clavier
momomomo13 -
minitoul_290 -

24 réponses