Centrer un <ul> au sein d'un <div>

**randimby** · 06/02/2008, 11h29

J'ai le code suivant (mixé html + css pour faire court)

Code :

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

1
2
3
4
5
<div id="wrapper" style="width: 17em;">
 <ul style="list-style-type:none;width: 15em;">
  <li>...</li>
 </ul>
</div>

Je voudrais centrer le contenu de l'<ul> au sein du <div>,
sans spécifier les marges. Est-ce possible?
Sachant que si ce n'était pas un <ul> mais un autre <div>,
ce genre de CSS m'aurait suffi:

Code :

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

1
2
3
4
5
div#wrapper {
text-align: center;
margin-right: auto;
margin-left: auto;
}

Le problème avec le <ul> c'est que cela force une certaine indentation, et que les navigateurs gèrent différemment.

**Erwan31** · 06/02/2008, 13h45

Bonjour,
j'ai pas compris ta dernière phrase mais pour centrer horizontalement (ne pas oublier de le préciser au départ), tu as aussi la technique des marges négative
allié à un positionnement absolue mais ce la sortir du flux normal de ton UL ne pause t-elle pas de problème?
Il faudrait que tu donne un exemple en image et que tu dises par exemple si la largeur totale de ton UL peut être fixée.

**franculo_caoulene** · 06/02/2008, 16h22

Salut,

Il faut définir une longueur (width) pour que le truc du margin:0 auto; fonctionne.

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
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="content-type"content="text/html; charset=UTF-8" />
	<title>test html</title>
	<style type="text/css">
		body {background-color:#000000;}
		div {width:800px; background-color:#111111;}
			ul {margin:0 auto; width:400px; background-color:#222222; color:#ffffff;}
 	</style>
</head>
<body>
	<div>
		<ul>
			<li>0</li>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
	</div>
</body>
</html>

**randimby** · 07/02/2008, 16h03

J'utilisais list-style-type:none;
et cela enlevait les points mais la <ul> est un peu décalé à droite.

Il me fallait en fait padding-left:0; pour que les 0, 1, 2, 3 ... dans cet exemple de franculo_caoulene soit aligné bien à gauche.

Ensuite, j'ajoute text-align:center, et j'ai ce que je veux.

Merci à tous.

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
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="content-type"content="text/html; charset=UTF-8" />
	<title>test html</title>
	<style type="text/css">
		body {background-color:#000000;}
		div {width:800px; background-color:#881111;}
		ul {margin:0 auto; width:400px; background-color:#222222; color:#ffffff; list-style-type: none; padding-left:0; text-align: center;}
 	</style>
</head>
<body>
	<div>
		<ul>
			<li>0</li>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
	</div>
</body>
</html>

**franculo_caoulene** · 07/02/2008, 16h05

Enlève le prologue xml et tu n'auras pas besoin de text-align, ceci suffit :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<title>test (x)html</title>
	<style type="text/css">
		body {background-color:#000000;}
		#div {width:800px; background-color:#111111;}
			ul {margin:0 auto; width:400px; background-color:#222222; color:#ffffff;}
 	</style>
</head>
<body>
	<div id="div">
		<ul>
			<li>0</li>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
	</div>
</body>
</html>

Centrer un <ul> au sein d'un <div>

Centrer un élément en CSS

Vue hybride

Discussions similaires

Partager

Partager