CSS, centrage vertical

Résolu/Fermé
ladgalen Messages postés 143 Date d'inscription jeudi 3 janvier 2008 Statut Membre Dernière intervention 6 septembre 2013 - 25 août 2009 à 14:20
M@dien Messages postés 437 Date d'inscription mercredi 29 juillet 2009 Statut Membre Dernière intervention 23 septembre 2010 - 25 août 2009 à 15:35
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 vendredi 3 novembre 2006 Statut Membre Dernière intervention 7 avril 2010 199
25 août 2009 à 14:45
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 mercredi 29 juillet 2009 Statut Membre Dernière intervention 23 septembre 2010 74
25 août 2009 à 14:48
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 jeudi 3 janvier 2008 Statut Membre Dernière intervention 6 septembre 2013 10
25 août 2009 à 15:07
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 mercredi 29 juillet 2009 Statut Membre Dernière intervention 23 septembre 2010 74
25 août 2009 à 15:35
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
svp faire une barre verticale avec clavier
momomomo13 -
minitoul_290 -

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

4 réponses