web-dev-qa-db-fra.com

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

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

Edit: Je travaille déjà en utilisant un div contenant pour l'élément flottant et en spécifiant un width pour le conteneur (puis utilisez margin: 0 auto; pour le conteneur). Je voulais juste savoir si cela pouvait se faire sans utiliser d'élément contenant ou du moins sans avoir à spécifier un width pour l'élément contenant.

csscss-floatpositioningcenteringvariable-width
56
Waleed Eissa

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

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

Et appliquez les CSS suivants: 

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

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

Voici un bon référence à ce sujet.

89
Leyu
.center {
  display: table;
  margin: auto;
}
65
user1325255

Vous pouvez utiliser fit-content valeur pour width.

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

Remarque: Cela ne fonctionne que dans les derniers navigateurs.

4
Fizer Khan

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

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

Dans le CSS, vous l'appelez avec ceci:

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

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

Peu importe ce que vous insérez pour la largeur, tant qu'elle est là et qu'elle n'est pas à 100%. Sinon, vous ne mettriez pas le centre sur rien.

Mais si vous le laissez flotter, à gauche ou à droite, les paris sont désactivés, car ils le sortent du flux normal d'éléments sur la page et le réglage de la marge automatique ne fonctionnera pas.

4
random

Cela fonctionne mieux lorsque id = container (qui est la div externe) et id = contient (qui est la div interne). Le problème avec la solution hautement recommandée est que dans certains cas, il en résulte une barre de défilement horizontale lorsque le navigateur tente de prendre en compte l'attribut left: -50%. Il y a une bonne référence pour cette solution

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

La réponse habituelle ici fonctionne parfois, mais parfois elle crée des barres de défilement horizontales difficiles à gérer, en particulier lorsque vous utilisez des navigations horizontales larges et des menus déroulants de grande taille. Voici une version encore plus légère qui évite les cas Edge:

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

La preuve que cela fonctionne!

Pour répondre plus précisément à votre question, il n’est probablement pas possible de se passer de la configuration d’un élément contenant, mais il est tout à fait possible de le faire sans spécifier une valeur de largeur. J'espère que cela évitera des maux de tête à quelqu'un!

4
fohryan

Ne pouvez-vous pas simplement utiliser display: inline block et align à center?

Exemple .

1
Kai