Comment centrer horizontalement un élément flottant de largeur variable ?

Question

Comment centrer horizontalement un élément flottant de largeur variable ?

Edit : J'ai déjà fait fonctionner ceci 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 pouvait se faire sans utiliser un élément contenant ou, du moins, sans avoir à spécifier un élément width pour l'élément contenant.

Answer 1

Disons que vous avez un DIV que vous voulez centrer horizontalement :

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

Dans le CSS, vous le styliserez de la manière suivante :

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

Ce qui signifie que vous avez une marge supérieure et inférieure de zéro pixel, et à gauche ou à droite, vous calculez automatiquement la quantité nécessaire pour être à égalité.

La largeur n'a pas vraiment d'importance, du moment qu'elle est présente et qu'elle n'est pas de 100 %. Sinon, vous ne fixeriez pas le centre sur quoi que ce soit.

Mais si vous le faites flotter, à gauche ou à droite, les jeux sont faits, car il sort du flux normal des éléments de la page et le paramètre de marge automatique ne fonctionne pas.

Answer 2

Ne pouvez-vous pas simplement utiliser display: inline block y align a center ?

Exemple .

Answer 3

Je viens de trouver ceci utile article ce qui a résolu le problème exact que j'avais avec le centrage. divs d'inconnu width .

Answer 4

Pour l'élément 50

width: 50%;
display: block;
float: right;
margin-right: 25%;