centrer une 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, qui s'est lancée vers la gauche, et qui flottait à la droite, et celui qui est entre eux. J'aimerais que le centre de la div pour être centré, mais malheureusement, float: center n'existe pas et je ne peux pas juste flotter à gauche et à ajouter rembourrage qu'il faudrait changer en fonction de la taille de la fenêtre.

Est là quelque chose de simple, je suis dominant? Ou comment ferais-je une telle chose?

mise à Jour:

En outre, j'aimerais trouver un moyen de centrage moyen div dans l'espace entre les divs dans le cas où l'air mieux.

  • Vous pouvez poster votre CSS et HTML? Aidera avec le processus de débogage.
  • C'est plus d'un type général de chose - comment faire flotter un élément à gauche de la page, un élément à droite de la page, et l'un centré au milieu de tous sur la même ligne
InformationsquelleAutor Mala | 2010-07-03
  1. 59

    Si vous avez deux divs flottants, alors vous savez les marges. Le problème est que le float:right div devraient être mis de l'avant le milieu de la div. Donc, fondamentalement, vous aurez:

    gauche flotté | droit-flotté | centré

    Maintenant, sur les marges: généralement, vous pouvez utiliser margin:0 auto, droit? Le problème est que maintenant que vous connaissez les valeurs des marges: les divs flottants! Vous avez juste besoin d'utiliser:

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

    Qui devrait fonctionner.

    Ans plus tard modifier

    En attendant, un nouveau jouet dans la ville: flexbox. Le support est assez bon (c'est à dire si vous n'avez pas besoin de l'appui inférieur à 10 IE) et la facilité d'utilisation est un chemin sur les flotteurs.

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

    • Cela a fonctionné parfaitement. Merci!
    • enfin, presque, de toute façon maintenant j'ai [gauche][center][variable de l'espace-fonction de la lunette-taille][droite]. Comment aurais-je centre le milieu de la partie entre les deux-pièces?
    • voir mon exemple, et la réponse ci-dessous.
    • Des années plus tard, j'ai toujours référence à ce.
    • Merci cela m'a vraiment aidé!
    • Merci pour la mise à jour sur la flexbox. Vraiment contribué plus que tout!
    • La réorganisation de ma flotte avant l'centrée contenu a travaillé comme un charme. Je n'ai même pas besoin de spécifier la largeur de la centrée sur le contenu ou les flotteurs. Ça marche, tout simplement.

    InformationsquelleAutor Ionuț Staicu
  2. 42

    En effet, l'important, c'est que la div centré venir après la gauche et la droite divs dans le balisage. Découvrez cet exemple, il utilise margin-left: auto et margin-right: auto centré sur le div, ce qui provoque pour qu'elle soit centrée.

    <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 pour tester: http://jsbin.com/agewes/1/edit

    • Merci pour la suggestion! Cependant, ce centre le milieu de la div par rapport à la page et non à ses "voisins"
    • wow effectivement j'avais complètement tort o_O Ce n'travail
    • Le margin: 0 auto n'est pas nécessaire ici..
    InformationsquelleAutor Samuel Meacham
  3. 6

    Habituellement, vous pouvez utiliser flexbox au lieu de flotte:

    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;
}
    InformationsquelleAutor Leo
  4. 4

    L'élément avec l'centrée contenu doit être spécifié après les deux flottait éléments. Après cela, il suffit de définir le moyen de l'élément de text-align: center. Le texte de l'centrée élément se presser entre les flotteurs.

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

    • Le problème est que cela ne fonctionne que sur du texte, et n'est donc pas applicable si, par exemple, on veut le centre d'une image entre les deux divs flottants
    • Semble très bien fonctionner à partir d'ici: jsfiddle.net/calvintennant/dBz5d Le contenu que vous êtes de centrage doit être display: inline ou display: inline-block.
    • pouvez-vous expliquer POURQUOI il en est? comme, pourquoi devez-vous mettre l'centrée dernier? Je ne sais pas comment va même sur le point de chercher le "pourquoi" de la sur ce. Je veux juste savoir pour référence future
    InformationsquelleAutor calvintennant
  5. 2

    Essayez ceci (assurez-vous d'utiliser au mieux les noms de classe):

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

    Le centre div place entre les deux flotteurs.

    Si vous souhaitez créer une gouttière entre centré div et les deux flotteurs, puis l'utilisation de la marge sur les chars, pas sur le centre de div.

    En raison de "zoom", le CSS ne sera pas validé, mais que la mise en page de travail dans IE 5.5 et 6.

    Noter que la source de l'ordre est important ici: les deux flotteurs doit venir en premier, puis votre "centré" div.

    InformationsquelleAutor Thierry Koblentz
  6. 0

    Dans certains cas, vous avez une limite et ne peut pas changer la page de balisage en déplaçant le milieu div après le bouton droit de la div flottant. Dans ce cas, suivez ces instructions:

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

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

    InformationsquelleAutor Tengiz
  7. -1

    Une solution simple, sans avoir à changer l'ordre des divs (parfois nous ne pouvons pas le faire) pourrait être un positionnement absolu pour le centre div comme suit:

    CSS:

    .container {
  position: relative;
}
.container div {
  width: 200px;
  background: red;
}
.left {
  float: left;
}
.right {
  float: right;
}
.center {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
}

    HTML:

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

    https://jsfiddle.net/Helioz/nj548y0g/

    InformationsquelleAutor MVP