webentwicklung-frage-antwort-db.com.de

Zentrieren eines Divs zwischen einem rechts und einem links schwebenden Div

Ich habe eine Seite, in der eine Kopfzeile aus drei divs besteht - eine, die nach links verschoben ist, eine, die nach rechts verschoben ist und eine, die zwischen ihnen liegt. Ich möchte, dass das zentrale Div zentriert ist, aber leider float: center existiert nicht und ich kann es nicht einfach nach links schweben und Polster hinzufügen, da es sich je nach Fenstergröße ändern müsste.

Gibt es etwas Einfaches, das ich übersehen habe? Oder wie würde ich so etwas machen?

Aktualisieren:
Außerdem würde ich gerne einen Weg finden, um diese Mitteldivision zu zentrieren im raum zwischen den divs falls das besser aussieht.

56
Mala

Wenn Sie zwei floated divs haben, kennen Sie die Ränder. Das Problem ist, dass das float:right - Div vor dem mittleren Div stehen sollte. Im Grunde haben Sie also:

linksschwebend | rechtsschwebend | zentriert

Nun zu den Rändern: Normalerweise können Sie einfach margin:0 auto Verwenden, oder? Das Problem ist, dass Sie jetzt die Werte der Ränder kennen: Floated Divs! Sie müssen also nur Folgendes verwenden:

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

Das sollte funktionieren.

Jahre später bearbeiten

Inzwischen ist ein neues Spielzeug in der Stadt: Flexbox. Die Unterstützung ist ziemlich gut (dh wenn Sie keine Unterstützung unter IE 10 benötigen) und die Benutzerfreundlichkeit ist weit überholt schwimmt.

Eine sehr gute flexbox Anleitung finden Sie hier . Das Beispiel, das Sie benötigen, ist hier richtig .

59
Ionuț Staicu

In der Tat ist der wichtige Teil, dass das zentrierte Div nach dem linken und rechten Div im Markup steht. Schauen Sie sich dieses Beispiel an, es verwendet margin-left: auto und margin-right: auto auf dem zentrierten div, wodurch es zentriert wird.

<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>

Hier ist ein JS-Bin zum Testen: http://jsbin.com/agewes/1/edit

42
Samuel Meacham

Normalerweise können Sie flexbox anstelle von floats verwenden:

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

Das Element mit dem zentrierten Inhalt muss angegeben werden after beide floated Elemente. Danach setzen Sie einfach das mittlere Element auf text-align: center. Der Text im zentrierten Element wird zwischen den Gleitkommazahlen eingeklemmt.

Siehe hier: http://jsfiddle.net/calvintennant/wjjeR/

4
calvintennant

Versuchen Sie dies (stellen Sie sicher, dass Sie bessere Klassennamen verwenden):

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

Das mittlere Div wird zwischen die beiden Schwimmer passen.
Wenn Sie eine Rinne zwischen diesem zentrierten Div und den beiden Floats erstellen möchten, verwenden Sie den Rand für die Floats und nicht für das mittlere Div.

Wegen "Zoom" wird das CSS nicht validiert, aber dieses Layout funktioniert in IE 5.5 und 6.

Beachten Sie, dass die Quellreihenfolge hier wichtig ist: Die beiden Floats müssen zuerst kommen, dann Ihr "zentriertes" Div.

2

In einigen Fällen haben Sie eine Einschränkung und können das Seiten-Markup nicht ändern, indem Sie die mittlere Unterteilung nach der rechtsverschobenen Unterteilung verschieben. Befolgen Sie in diesem Fall die folgenden Anweisungen:

  1. Für Behälter: position: relative
  2. Für mittlere Div: position: absolute; left: [containerWidth - middle-width / 2]

Ich hoffe du hast die Idee.

0
Tengiz