Centrer en hauteur une liste UL dans un FOOTER

**Obi Juan Kenobi** · 31/01/2017, 14h11

Bonjour à vous amis codeurs,

J'ai un problème à vous soumettre. Considérons les codes HTML et CSS suivants :

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
20
21
22
23
24
25
26
27
<!DOCTYPE>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<title>Pied de page</title>
	<link rel="stylesheet" href="css/styles6.css" type="text/css">
</head>
<body>
	<footer>
		<nav>
			<ul>
				<li><a href="infex.html"><img class="logo" src="img/logo.png" alt="Logo" title="Logo"></a></li>
				<li><a href="#">&copy 2017</a></li>
				<li><a href="#">Mentions légales</a></li>
				<li><a href="#">Conditions générales d'utilisation</a></li>
				<li><a href="#">Conditions générales de vente</a></li>
			</ul>
			<ul>
				<li class="rs"><a href="#"><img src="img/facebook.gif" alt="Logo Facebook" title="Logo Facebook"></a></li>
				<li class="rs"><a href="#"><img src="img/twitter.gif" alt="Logo Twitter" title="Logo Twitter"></a></li>
				<li class="rs"><a href="#"><img src="img/youtube.gif" alt="Logo Youtube" title="Logo Youtube"></a></li>
				<li class="rs"><a href="#"><img src="img/in.gif" alt="Logo LinkedIn" title="Logo LinkedIn"></a></li>
			</ul>
		</nav>
	</footer>
</body>
</html>

Code :

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
@charset "utf-8";
 
* {
	margin:0;
	padding:0;
}
 
footer {
	background:purple;
	display:flex;
	/* align-items:center; */
	padding:10px;
}
 
.logo {
	width:40px;
}
 
.rs {
	margin-right:-15px;
}
 
nav {
	margin:auto;
}
 
nav ul li {
	float:left;
	list-style:none;
}
 
nav ul li a {
	color:white;
	margin-right:20px;
	text-decoration:none;
}
 
nav ul li a:hover {
	text-decoration:underline;
}
 
footer nav ul img {
	width:25px;
}
 
footer nav ul {
	height:40px;
	line-height:40px;
	float:left;
}

Le résultat est le suivant :

Nom : Capture.PNG
Affichages : 299
Taille : 13,4 Ko

Ma question est celle-ci : comment centrer verticalement les 4 pictogrammes des réseaux sociaux ?

Amicalement.

**NoSmoking** · 31/01/2017, 15h09

Bonjour,
il me semblait que l'on avait répondu à ta question dans cette discussion !
Alignement vertical dans un pied de page

**Obi Juan Kenobi** · 31/01/2017, 16h08

En effet mais cela ne marche maintenant.
J'ai placé :

Code :

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

1
2
display:flex;
align-items:center;

mais cela n'aligne pas verticalement les 4 pictogrammes.
Je n'arrive pas à trouver la solution, même après avoir regardé les Cours et tutoriels pour apprendre CSS

**NoSmoking** · 31/01/2017, 18h34

En effet mais cela ne marche maintenant.

oui mais voilà je t'avais proposé cette façon simple de résoudre ton problème

Code :

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

1
2
3
footer img {
  vertical-align: middle;
}

Centrer en hauteur une liste UL dans un FOOTER [CSS 3]

Centrer un élément en CSS

Discussions similaires

Partager

Partager