Comment centrer horizontalement un élément flottant d'une largeur variable?

Comment centrer horizontalement un élément flottant d'une largeur variable?Comment centrer horizontalement un élément flottant d'une largeur variable?

Éditer: J'ai déjà ce travail en utilisant un contenant div pour l'élément flottant et en spécifiant un width pour le conteneur (puis utiliser margin: 0 auto; pour le conteneur). Je voulais juste savoir si cela peut être fait sans utiliser un élément contenant ou au moins sans avoir à spécifier un width pour l'élément contenant.

Source

2009-08-05 Waleed Eissa

Si vous allez le centrer, pourquoi est-il flottant? – You

c'est une longue histoire, je suis flottant pour d'autres raisons –

duplication possible de [** Comment centrer les éléments flottants? **] (http://stackoverflow.com/questions/4767971/how-to-center-float -elements) – arnaud576875

Supposons que vous avez un DIV que vous voulez centré horizontalement:

<div id="foo">Lorem ipsum</div>

Dans le CSS vous voulez dénommer avec ceci:

#foo 
{ 
    margin:0 auto; 
    width:30%; 
}

qui stipule que vous avez une marge supérieure et inférieure zéro pixel, et à gauche ou à droite, déterminer automatiquement combien il faut égaliser.

Peu importe vraiment ce que vous mettez dans la largeur, tant qu'il est là et n'est pas 100%. Sinon, vous ne mettriez pas le centre sur quoi que ce soit.

Mais si vous le faites flotter, à gauche ou à droite, les paris sont désactivés car cela le retire du flux normal des éléments sur la page et le paramètre de marge automatique ne fonctionnera pas.

Source

2009-08-05 09:31:43 random

Le seul problème ici est que vous devez définir explicitement la largeur; 'width: auto;' ne fonctionne pas (AFAIK). – You

Correct, vous devez définir quelque chose comme la largeur. Mais la question portait sur la largeur variable, j'espère que ce n'est pas un autre mot pour auto et plutôt une valeur fluctuante ou un montant relatif, comme em ou% – random

Merci pour votre réponse, en fait je n'ai pas de problème avec les éléments de centrage m essayant de faire est centre un "élément flottant". Je sais que ce n'est pas possible dans CSS, mais j'espérais que quelqu'un pourrait avoir un hack qui peut fonctionner pour cela, j'ai même essayé d'utiliser une table, mais cela n'a pas fonctionné aussi. Malheureusement, dans mon scénario, il n'y a aucun moyen de faire flotter l'élément, j'en ai besoin pour des raisons spécifiques. –

En supposant que l'élément qui est flottant et sera centré est un div avec un id="content" ...

<body> 
<div id="wrap"> 
    <div id="content"> 
    This will be centered 
    </div> 
</div> 
</body>

et appliquer les CSS suivant:

#wrap { 
    float: left; 
    position: relative; 
    left: 50%; 
} 

#content { 
    float: left; 
    position: relative; 
    left: -50%; 
}

Voici un bon reference à ce sujet.

Source

2009-08-05 10:06:50 Leyu

Merci, je vais jeter un oeil sur ce –

Vous pouvez aussi essayer 'margin-left' au lieu de' left' et 'position: relative'. Margin-left a travaillé pour moi sur l'élément -50%. – Muhd

oui - mais quelle est la valeur ajoutée @muhd? – marcusklaas

Vous ne pouvez pas simplement utiliser display: inline block et align à center?

Example.

Source

2011-05-07 19:46:44 Kai

rien dans votre violon est flottant ... – Muhd

.center { 
    display: table; 
    margin: auto; 
}

Source

2012-04-10 22:54:48

cela a fonctionné beaucoup mieux pour moi que la réponse acceptée, essayez les deux! –

Je préfère aussi cette méthode, mais cela fonctionne sur IE8 +, donc si vous avez besoin d'IE7, vous devez utiliser la réponse acceptée. – isapir

Merci- sauvé mon temps, vraiment! – Rossitten

Vous pouvez utiliser la valeur fit-content pour width.

#wrap { 
    width: -moz-fit-content; 
    width: -webkit-fit-content; 
    width: fit-content; 
    margin: auto; 
}

Remarque: Fonctionne uniquement avec les navigateurs les plus récents.

Source

2013-08-13 10:17:22

La réponse populaire ici fonctionne parfois, mais d'autres fois, elle crée des barres de défilement horizontales qui sont difficiles à traiter - en particulier lorsqu'il s'agit de larges navigations horizontales et de grands menus déroulants. Voici une version encore plus léger qui permet d'éviter les cas limites:

#wrap { 
    float: right; 
    position: relative; 
    left: -50%; 
} 
#content { 
    left: 50%; 
    position: relative; 
}

Proof that it is working!

Pour répondre plus précisément à votre question, il est probablement impossible de le faire sans mettre en place un élément contenant, mais il est très possible de faire sans spécifier une valeur de largeur. J'espère que cela sauve quelqu'un là-bas quelques maux de tête!

Source

2014-04-15 21:49:20 fohryan

Cela fonctionne mieux lorsque id = container (qui est la div externe) et id = contained (qui est la div interne). Le problème avec la solution hautement recommandée ci-dessous est qu'elle entraîne dans certains cas une barre de défilement horizontale lorsque le navigateur essaie de répondre à l'attribut de gauche: -50%. There is a good reference pour cette solution

 #container { 
      text-align: center; 
     } 
     #contained { 
      text-align: left; 
      display: inline-block; 
     }

Source

2014-11-24 11:47:08

Comment centrer horizontalement un élément flottant d'une largeur variable?

Répondre

Questions connexes