centrer UL dans un div

**devlm** · 09/03/2012, 15h47

Voici mon code HTML

Code :

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

1
2
3
4
5
6
7
<div class="affichage-pagination">&nbsp;
<div class="resultat-pagination">13 résultats sur 2 pages</div>
<div id="pagination">
<ul><li class="arrowleft"><a href="nos-offres-fonds-de-commerce.php?page=1">&nbsp;</a></li>
<li><a href="nos-offres-fonds-de-commerce.php?page=1">1</a></li>
<li class="active"><a href="nos-offres-fonds-de-commerce.php?page=2">2</a></li>    
		</div>

mon css

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
/* Paging */
 
.resultat-pagination {
		text-align:center;
        display:block;
        clear:both;
        padding:10px 10px 0 10px;
        overflow:hidden;
		margin:0 auto;/*centrage marges automatiques*/
}
.affichage-pagination{
		margin:0 auto;/*centrage marges automatiques*/
		text-align:center;
		width:300px;
}
#pagination {
	margin:0 auto;/*centrage marges automatiques*/
	text-align:center;
     padding:10px 10px 0 10px;
	width:300px;
}
 
    #pagination ul{
	margin:0 auto; 
	width:300px;
	text-align:center;
	padding:0;
	list-style-type:none;
    }
    #pagination ul li{
	text-align:center;
	padding:0;
	list-style-type:none;	
	display:inline;
	margin-right:5px;
	float:left;
	font-size:12px;
	line-height:11px;
    }
    /* paging link*/
   #pagination ul li a, #pagination ul li.active a{
       border:0;
       padding:8px 0px;
       overflow:hidden;
       width:28px;
       display:block;
 
       text-decoration:none;
   }	
    /* paging link*/
  #pagination ul li a, #pagination ul li.active a{
       background:url(../images/paging_buttons.jpg) 104px 0 ;
       color:#C3C3C3;
   }
 
    /* paging mouseover*/
    #pagination ul li.active a, #pagination ul li a:hover{
       color:#fff;
       background:url(../images/paging_buttons.jpg) 200px 0 ;
    }
 
    /* Arrow Left */   
    #pagination ul li.arrowleft a{
         background:url(../images/paging_buttons.jpg) 72px 0 ;
    }
 
    /* Arrow Left Hover State */
    #pagination ul li.arrowleft a:hover{
         background:url(../images/paging_buttons.jpg) 168px 0 ;
    }        
 
    /* Arrow Right  */
    #pagination ul li.arrowright a{
         background:url(../images/paging_buttons.jpg) 40px 0 ;
 
    }
 
    /* Arrow Right Hover State */    
    #pagination ul li.arrowright a:hover{
         background:url(../images/paging_buttons.jpg) 136px 0 ;
    }

Je ne parviens pas malgré tout mes efforts à centrer mon ul dans le div pour centrer ma pagination de recherche.

Voyez-vous une erreur.

**NoSmoking** · 09/03/2012, 16h39

Bonjour,
repars sur des bases saines

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
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[...]</title>
</head>
<body>
<div style="width:400px;margin:auto;border:1px solid gray;">
  <h3 style="text-align:center;background-color:#e0e0e0;">13 résultats sur 2 pages</h3>
  <ul style="width:200px;margin:auto;border:1px solid lightgrey">
    <li><a href="nos-offres-fonds-de-commerce.php?page=1">Page #1</a></li>
    <li><a href="nos-offres-fonds-de-commerce.php?page=1">Page #2</a></li>
    <li><a href="nos-offres-fonds-de-commerce.php?page=2">Page #3</a></li>
  </ul>
</div>
</body>
</html>

le style inline est à mettre dans le partie CSS, il va de soit...

centrer UL dans un div

Centrer un élément en CSS

Discussions similaires

Partager

Partager