Inline-Block-Div im übergeordneten Element zentrieren, während Floating-Elemente ignoriert werden

Lesezeit: 2 Minuten

Benutzer-Avatar
KDaker

Ich versuche, eine Inline zu zentrieren div in seinem Elternteil. Das Elternelement hat auch ein Kind div das nach rechts schwimmt. Wegen der Rechtsbündigkeit divmeine zentriert div wird nach links verschoben. Ich möchte das mittlere Div unabhängig von der Position/Größe des schwebenden Div wie im Bild unten mit dem bereitgestellten Code zentrieren.

Geben Sie hier die Bildbeschreibung ein

.parent {
    text-align: center;
}
.parent div {
    display: inline-block;
}
<div id="parent">
    <div> ... </div>
    <div style="float:right"> ... </div>
</div>

Das aktuelle Setup hat beide inneren Divs innerhalb des übergeordneten Elements, aber ich gehe davon aus, dass der richtige Weg darin besteht, das rechtsbündige zu haben div mit einer absoluten Position draußen sein?

Außerdem habe ich mehrere Instanzen des übergeordneten div auf derselben Seite.

Wie kann ich dieses Ergebnis erreichen?

  • Versuchen Sie: stackoverflow.com/questions/13548358/…

    – Diodeus – James MacFarlane

    14. August 2013 um 19:19 Uhr

  • Hat Ihr rechtes div eine bekannte/feste Breite? Dasselbe gilt für C und Eltern

    – FelipeAls

    14. August 2013 um 19:20 Uhr

Benutzer-Avatar
Sobin Augustinus

setze das richtige div css

position:absolute;
right:0;

relativ zum übergeordneten div

#parent {
position:relative;
}

  • Dies erfordert auch, die Position des Elternteils auf absolut zu setzen

    – Bobo

    14. August 2013 um 19:22 Uhr

  • Wenn das rechte div keine maximale Breite (oder eine bekannte Breite) hat, könnte der Inhalt teilweise unter dem anderen Element verborgen sein. @Bobo relativ ist ausreichend

    – FelipeAls

    14. August 2013 um 19:23 Uhr

  • wollte auch antworten, wäre aber dasselbe gewesen. Habe aber eine Geige erstellt: jsfiddle.net/HjGrV

    – Tim Mac

    14. August 2013 um 19:28 Uhr

Benutzer-Avatar
Kevin Lynchen

position:absolute ist der einzige Weg

DEMO http://jsfiddle.net/kevinPHPkevin/u4FWr/1/

.center {
    display:inline-block;
    position: absolute;
    left:0;
    right:0;
}

BEARBEITET

bin mir nicht sicher ob das schon vorgeschlagen wurde

Oder du kannst absolute: position; das Recht div stattdessen

DEMO http://jsfiddle.net/kevinPHPkevin/u4FWr/3/

.right {
    display:inline-block;
    position: absolute;
    right:0;
}

  • ist das der einzige Weg.? Legen Sie einen linken Rand für das mittlere Div fest, der der Breite des rechten Div entspricht, und legen Sie dann den mittleren Div-Rand fest: automatisch. Ist dies ein möglicher Weg?

    – Sobin Augustinus

    14. August 2013 um 19:32 Uhr

  • Das ist ein möglicher Weg, aber ich würde es nicht empfehlen. Eine andere Möglichkeit wäre, das rechte Div auf absolute Position zu setzen und es richtig zu lokalisieren, ohne zu schweben, und dann das andere Div entsprechend zu zentrieren. Siehe meine Bearbeitung.

    – Kevin Lynch

    14. August 2013 um 19:37 Uhr

  • ya und darum geht es in meiner Antwort.

    – Sobin Augustinus

    14. August 2013 um 19:41 Uhr

  • Die erste Lösung funktioniert also nicht wirklich, weil das übergeordnete div aus irgendeinem Grund mit einer Höhe von 0 endet. sehen Dies . Der zweite funktioniert mit dem Zusatz ‘position:relative’ auf dem Elternteil, aber Sobin hat dies bereits zuvor beantwortet 🙂 danke trotzdem.

    – KDaker

    14. August 2013 um 19:53 Uhr

  • Ja, @SobinAugustin hat es zuerst beantwortet. Es klingt wie die beste Lösung für Ihre Bedürfnisse.

    – Kevin Lynch

    14. August 2013 um 19:58 Uhr

1130570cookie-checkInline-Block-Div im übergeordneten Element zentrieren, während Floating-Elemente ignoriert werden

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy