Discussion :

[Obi Juan Kenobi]

Bonjour à vous amis développeurs,

J'ai un problème insoluble pour moi en CSS3, vous pourrez certainement m'aider.

Voici un pied de page HTML :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<footer id="piedPrincipal">
	<nav id="menuPiedDePage">
		<ul>
			<li><a href="index.html" target="_blank"><img class="iconRs" src="inc/img/logoPetit.gif"></a></li>
			<li><a href="mentions.html" target="_blank">Mentions légales</a></li>
			<li>|</li>
			<li><a href="conditions.html" target="_blank">Conditions générales de vente</a></li>
			<li>|</li>
			<li><a href="contact.html" target="_blank">Contact</a></li>
			<li>
				<ul>
					<li><a href="#"><img class="iconRs" src="inc/img/iconeFaceBook.png"></a></li>
					<li><a href="#"><img class="iconRs" src="inc/img/iconeTwitter.png"></a></li>
					<li><a href="#"><img class="iconRs" src="inc/img/iconeGoogle.png"></a></li>
				</ul>
			</li>
		</ul>
	</nav>
</footer>

Voici la CSS associée à ce pied de page :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
#piedPrincipal {
	background:maroon;
	color:white;
	font-size:0.8em;
	font-family: 'aleolightitalic';
}
 
#piedPrincipal li {
	display:inline;
}
 
#piedPrincipal li ul {
	display:inline;
}
 
#piedPrincipal a {
	color:white;
	text-decoration:none;
	font-size:0.8em;
	text-transform:uppercase;
	letter-spacing:1px;
	font-family: 'aleolight';
	margin:0 8px;
}
 
#piedPrincipal a:hover {
	text-decoration:underline;
}
 
#menuPiedDePage {
	width:80%;
	text-align:center;
	margin:auto;
	padding:10px 0;
}

Le résultat final est le suivant :



Mon souci est celui-ci : je n'arrive pas à centrer horizontalement la ligne des mentions, des conditions et du contact. J'ai essayé avec la propriété CSS3 "vertical-align:middle;" mais rien ne bouge. Peut être qu'il me manque quelque chose ou bien c'est une autre propriété à utiliser.

Merci pour votre aide.