28173 sujets

CSS et mise en forme, CSS3

[Résolu] Centrer un div horizontalement sans pour autant spécifier une

Bonjour,

La réponse doit être quelque part mais j'ai pourtant cherché en vain très longtemps.

Je voudrais donc centrer un élément de type "block" horizontalement sans en spécifier la largeur puisque la largeur de ce ul qui contient ma navigation va changer dynamiquement selon le nombre de page.

Ce serait bien une solution 100% cross browser.

Mon code actuel est tel que ceci :

        <ul class="navigation">
            <li class="precedent"><a href="#"><i class="icon-"> </i> Précédent</a></li>
            <li class="active"><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">6</a></li>
            <li><a href="#">7</a></li>
            <li><a href="#">8</a></li>
            <li><a href="#">9</a></li>
            <li><a href="#">10</a></li>
            <li class="suivant"><a href="#"> Suivant <i class="icon-"> </i></a></li> 
        </ul>


Merci pour votre expertise;
Bonjour,
Qu'as-tu déjà appliqué comme CSS dessus ? Parce que juste avec ce code, tu peux centrer en faisant juste un :
ul {
  padding : 0;
  text-align : center;
}
text-align:center;
ce serait trop simple.
Non ça ne fonctionne pas.

Les <li> à l'interieur sont en float:left; pour les disposer les uns à côté des autres. Le reste de mon css n'est que la mise en couleur, de la taille de police... Rien d'important.
[EDIT: ^ grilled Smiley lol ]

Je n'utiliserais pas de float, et je resterais sur l'idée de Gothor :

ul {text-align: center;}
li {display: inline-block;}

Modifié par Muchos (27 Aug 2012 - 16:35)
J'ai aussi hésité à mettre inline-block, mais tout dépend de comment il style ses li...
S'il met des propriétés de block, il devient obligatoire, mais sinon, plutôt mettre inline, car les vieux IE ne savent pas transformer un block en inline-block je crois.
RE-Bonjour,

J'ai voulu donner un exemple pour expliciter ma question, j'ai écrit ma navigation autrement et j'ai pu la centrer.

Cependant je souhaiterais toujours avoir une réponse à cette question :

Peut on centrer une <div> horizontalement sans pour autant spécifier une largeur ?

Je pense que la réponse est "Non, c'est impossible."
Mais si je me trompe surtout venez me le dire.
Merci pour vos réponses, effectivement vos solution marchent pour mon exemple. J'avais régler le problème juste avant.
Mais en fait ce que je voulais c'est juste avoir la réponse à la question générale de mon message ci-dessus.

Du coup vos réponses ne répondent pas à la grande question puisque le conteneuir fait toujours 100% de la largeur de son parent.

Je crois que la solution se trouve vers le "display:inline-block;"
La div prend alors la largeur de son contenu et pas plus.
Cependant il me semble que centrer un élément en "display:inline-block;" avec "margin:0 auto" ne fonctionne pas
Administrateur
boucdur00000 a écrit :

Cependant il me semble que centrer un élément en &quot;display:inline-block;&quot; avec &quot;margin:0 auto&quot; ne fonctionne pas

Non mais avec un text-align center sur le parent, oui Smiley smile
en fait, plein de possibilité, float ou pas float, display comme tu le sent, text-align ou margin-auto ... il suffit d'associer chacune des possibilités de style de façon cohérente.

une liste non exhaustive de comment centrer un ul (ou ses li ) horizontalement sans trop se soucier du nombre de li ni de leur taille ... en ce modérant bien sur Smiley smile
http://yidille.free.fr/plux/valign/?52-menu-centre-technique-de-base-et-avancees

++,
GC

<edit> En fait le point de départ c'est : je centre le conteneur ou son contenu ?
apparement pour toi c'est le conteneur, alors float est seulement inexploitable sur le conteneur ... enfin en éliminant aussi les douteuses marges négatives et positionnement relatif/absolu </edit>
Modifié par gc-nomade (27 Aug 2012 - 19:56)
Merci gc-nomade, merci Raphael, et merci Gothor,

Je crois que ça répond à mon problème.
Je cherchais une solution vraiment très simple et très souple. C'est donc possible mais juste un tout petit peu plus compliqué que ce que je pouvais espérer.

Mais c'est finalement pas si compliqué.
Ce dernier lien est intéressant.
Encore merci, je vais marquer ça en résolu.
Sujet clos
Aller à