web-dev-qa-db-fra.com

centrer un div entre celui qui flottait à droite et celui qui flottait à gauche

J'ai une page dans laquelle un en-tête se compose de trois divisions - une qui flottait à gauche, une qui flottait à droite et une qui se trouvait entre elles. J'aimerais que cette div centrale soit centrée, mais malheureusement float: center n'existe pas et je ne peux pas simplement le faire flotter vers la gauche et ajouter du rembourrage car il devrait changer en fonction de la taille de la fenêtre.

Y a-t-il quelque chose de simple que j'oublie? Ou comment ferais-je une telle chose?

Mise à jour:
De plus, j'aimerais trouver un moyen de centrer ce div moyen dans l'espace entre les divs au cas où ça a l'air mieux.

htmlcsscenter
56
Mala

Si vous avez deux div flottants, vous connaissez les marges. Le problème est que le float:right div doit être placé avant le div du milieu. Donc, fondamentalement, vous aurez:

flottant à gauche | flottant à droite | centré

Maintenant, à propos des marges: généralement, vous pouvez simplement utiliser margin:0 auto, droite? Le problème est qu'en ce moment vous connaissez les valeurs des marges: div flottés! Il vous suffit donc d'utiliser:

margin:0 right-floated-width 0 left-floated-width

Cela devrait fonctionner.

Des années plus tard Modifier

Pendant ce temps, un nouveau jouet est en ville: la flexbox. Le support est assez bon (c'est-à-dire si vous n'avez pas besoin d'un support inférieur à IE 10) et la facilité d'utilisation est bien au-dessus des flottants.

Vous pouvez voir un très bon flexbox guide ici . L'exemple dont vous avez besoin est juste ici .

59
Ionuț Staicu

En effet, l'important est que les div centrés viennent après les divs gauche et droit dans le balisage. Découvrez cet exemple, il utilise margin-left: auto et margin-right: auto sur la div centrée, ce qui la fait centrer.

<html>
<head>
    <style type="text/css">
        #left
        {
            float: left;
            border: solid 1px red;
        }

        #mid
        {
            margin-left: auto;
            margin-right: auto;
            border: solid 1px red;
        }

        #right
        {
            float: right;
            border: solid 1px red;
        }
    </style>
</head>

<body>
    <div id="left">
        left
    </div>

    <div id="right">
        right
    </div>

    <div id="mid">
        mid
    </div>
</body>
</html>

Voici un JS Bin à tester: http://jsbin.com/agewes/1/edit

42
Samuel Meacham

Habituellement, vous pouvez utiliser flexbox au lieu de flottants:

https://jsfiddle.net/h0zaf4Lp/

HTML:

<div class="container">
    <div>left</div>
    <div class="center">center</div>
    <div>right</div>
</div>

CSS:

.container {
   display: flex;
}

.center {
    flex-grow: 1;
}
6
Leo

L'élément avec le contenu centré doit être spécifié après les deux éléments flottants. Après cela, définissez simplement l'élément central sur text-align: center. Le texte dans l'élément centré se coincera entre les flottants.

Voir ici: http://jsfiddle.net/calvintennant/wjjeR/

4
calvintennant

Essayez ceci (assurez-vous d'utiliser de meilleurs noms de classe):

.left {
 float:left;
 width:200px;
}
.right{
 float:right;
 width:200px;
}
.center {
 overflow:hidden;
 zoom:1;
}

Le div central s'insérera entre les deux flotteurs.
Si vous voulez créer une gouttière entre cette div centrée et les deux flotteurs, utilisez la marge sur les flotteurs, pas sur la div centrale.

En raison du "zoom", le CSS ne sera pas validé, mais cette mise en page fonctionnera en IE 5.5 et 6.

Notez que l'ordre source est important ici: les deux flotteurs doivent venir en premier, puis votre div "centré".

2
Thierry Koblentz

Dans certains cas, vous avez une limitation et ne pouvez pas modifier le balisage de page en déplaçant le div du milieu après le div flottant à droite. Dans ce cas, suivez ces instructions:

  1. Pour conteneur: position: relative
  2. Pour le div moyen: position: absolute; left: [containerWidth - middle-width / 2]

J'espère que vous avez eu l'idée.

0
Tengiz