Centrer des li dans une ol

Bonjour,

je cherche désespéramment à centrer des li contenus dans une ol.

donc j'ai un slide dans lequel l'utilisateur peut mettre des images, cependant le nombre de ces images sont aléatoires, 1,5,3...

la ol fait 940px de large (la largeur du site), j'arrive à centrer la ol mais pas les li qui sont dedans.

donc je voudrais centrer les 1,2,3,4,5 au milieu du bloc gris
Modifié par nmy (22 Apr 2013 - 11:44)

Hello,

tu peux essayer de creuser la piste du text-align center couplé à des display inline(-block).

Ju

j'arrête pas justement

css

ol#controls {
	margin:0;
	padding:0;
	list-style-type:none;
	text-align:center;
}

ol#controls li {
	display:inline;

html

Quel est le style des liens inclus dans la liste ?

Je crois que le screenshot n'est pas le bon, toujours pas de css.

euh si le css est en haut....

ol#control {} ....

J'aurais bien aimé avoir le style des liens. Je suspecte quelques propriétés malignes

le css complet

body {
	color:#333;
	font:13px/18px 'Open Sans',arial,sans-serif;
	font-weight:400;
}

#header {
	margin:0 auto;
}
/* logo */
#header .container_16{
	height:64px;
	position:relative;
}
/* ligne sous logo */
#header .header {
	border-bottom:1px solid #e8e8e8;
}
/* écartement de la ligne sous logo */
#header .grid_4 {
	margin-top:20px;
	margin-bottom:10px;
}
/* Menu Haut */
#MenuHaut {
	margin-top:30px;
}

#MenuHaut ul {
	list-style:none;
}

#MenuHaut li {
	float:left;
	margin-left:2px;
	text-transform:uppercase;
}

#MenuHaut ul li a {
	display:block;
	float:left;
	text-decoration:none;
	color:#000;
	width:130px;
	text-align:center;
	padding:5px;
}

#MenuHaut ul li a:hover {
	border-bottom:1px solid #1eb8fa;
}

/* formulaire de recherche */
#searchTerm {
	position:absolute;
	right:-530px;
	margin-top:-30px;
}

.bodywrapper form.simplesearchform .searchsubmit {
	right:-530px;
	top:-29px;
}
/* barre raccourcis */
#header-language .shortcuts-inline {
	position:absolute;
}
/* cacher mon espace de la barre de raccourcis */
#header-language .shortcuts-inline .shortcuts-mysettings {
	display:none;
}
/* hauteur bannière 940x400 */
.bodywrapper #banner {
	height:100%;
}
/* taille fixe pour les images (940x400,occupe tout l 'espace )*/
#banner p img {
	display:block;
	margin:0 auto;
}
/* control slider cache*/
ol#controls {
	margin:0;
	padding:0;
	text-align:center;
}

ol#controls li{
	display:inline;
}

ol#controls a {
	display:inline-block;
}

/* menu navigation gauche principal */
#MenuPrincLeft {
    border:1px solid #e8e8e8;
	background:#999999;
	margin-top:30px;
	border-radius:5px 5px 5px 5px;
	box-shadow: 0 0 50px 1px rgba(0, 0, 0, 0.50);
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	-moz-box-shadow: 0 0 10px 1px rgba(5, 0, 0, 0.30);
	-webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.30);
}

#MenuPrincLeft  .navbar ul {
	margin-left:-40px;
}

#MenuPrincLeft  .navbar li {
	list-style:none;
	margin-left:20px;
	text-transform:uppercase;
}

#MenuPrincLeft  .navbar  li:hover  {
    background-color: #1eb8fa;
	margin:0;
}

#MenuPrincLeft .navbar li:hover > a {
	color:#fff;
}

#MenuPrincLeft  .navbar li a{
	color:#000;
	text-decoration:none;
}

#conteneur-body {
	margin-top:30px;
}

#footer {
	margin-top:30px;
	height:300px;
	background: -webkit-linear-gradient(top,#f3f3f3 0,#fff 100%);
}

Comme ça en vrac, c'est un peu l'orgie, je ne vois pas trop (je n'ai pas moyen de savoir de quelles propriétés les éléments héritent).

* Assures-toi que tes liens ne flottent pas
* Assures-toi que ton ul soit bien un block suffisamment large
* Assures toi que tes li ne soient pas des blocks et ne flottent pas


Ju

ce n 'est un ul mais un ol....

là tu as tout le code la partie concernée je n'ai mis que le code css en question.

Les "li" sont en float:left sinon je ne les ai pas horizontalement, j'ai essayé sans le float:left mais avec display:inline et même soucis.

Je n'ai pas accès à tout le sie, c'est via Jahia que je l'ai fait, et Jahia utilise le framework 960.css, donc c'est pour ça que j'ai des noms bizarres genre grid_4, etc.

Je peux ovverider ces styles en créant les miens...

Tu peux te baser sur ce tutoriel qui fonctionne très bien : http://css-tricks.com/centering-list-items-horizontally-slightly-trickier-than-you-might-think/
Modifié par tazzkiller (22 Apr 2013 - 16:01)

Ah ben le voilà le problème : le float:left sur tes li.
Tu es obligé de le faire sauter. Tes li devraient se placer côté à côté. Si ce n'est pas le cas, n'auraient-ils pas une largeur ?

j'ai essayé ce que vous m'avez dit mais il manque un p tit truc donc vais essayer de vous expliquer...

donc j'ai une div container_16 qui prends toute la largeur de la page (pas oublier que je suis en grid 960 donc largeur max 960)

cette div contient une autre div grid_16 qui elle à des marges à gauche et droite de 10px;

qui contient elle-même une autre div container_slide

ensuite dedans j'ai 2 div une qui contient les images et l'autre en dessous les controls ol

<div class="container_16">
    <div class="grid_16">
        <div class id="container_slide">
            <div id="slider2">...</div>
            <ol id=controls>
               <li id="controls1">...</li>

donc en gros l'image est centrée, le rectangle clair en bas qui est la div <ol id="controls"> est centré ... maintenant je voudrais que les li (12345) soit centrés dans le rectangle gris...

voici le css en question pour le moment

/* control slider cache*/
.bodywrapper ol#controls {
	width:500px;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	border:none;
	background:none;
}

.bodwrapper ol#controls li{
	text-align:center;
	margin-left:auto;
	margin-right:auto;
}

ol#controls li{
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	display:inline;
}

.bodywrapper ol#controls a {
	text-align:center;
	margin-left:auto;
	margin-right:auto;
}