Flexbox - Firefox zentriert absolutes Element nicht

Ich verwende absolute Element innerhalb der Flexbox. Mein Code arbeitet an Chrome, aber Firefox zentriert nicht mein absolutes Element und skaliert mein Bild.Flexbox - Firefox zentriert absolutes Element nicht

hier ist mein Code

<figure class="banner"> 
    <img src="http://doc.jsfiddle.net/_downloads/jsfiddle-desktop-1440x900-a.png" /> 
    <figcaption> 
    <p>TEXT</p> 
    <h3>TİTLE</h3> 
    <p>TEXT</p> 
    <a href="#">DETAIL</a> 
    </figcaption> 
</figure>

css:

.banner{display:flex; overflow:hidden; justify-content:center; position:relative; width:350px;} 
.banner figcaption{position:absolute; z-index:1; color:@white; text-align:center; width:90%; align-self:center; background:#f00;}

https://jsfiddle.net/nbqtn678/

Quelle

2017-02-06 Eren Akkus

Flexbox kommt in den meisten Browsern mit absoluter Positionierung nicht gut zurecht. Es gibt mehrere Möglichkeiten, um das Layout, das Sie in der Jfiddle gemacht haben, zu erreichen, aber ich kann, wenn das Bild ein Hintergrundbild sein kann, oder das ist ein loser Gegenstand innerhalb des Banners sein. Ist eine andere Lösung akzeptabel, solange das Ergebnis gleich ist? Denn dann könnte ich einige Beispiele aufstellen. –

Hallo Paul, ich suche einen wahren Weg. Also, was ist dein Vorschlag? –

Sie nicht absolut brauchen Position Ihre Inhalte zu zentrieren, margin 0 auto verwenden, um figcaption.

.banner figcaption{ margin: 0 auto; ...}

Position entfernen abloute.

Edit: wenn Sie das Bild als Hintergrund haben:

.banner{display:flex; overflow:hidden; justify-content:center; position:relative; width:350px;} 
.banner img{position: absolute} 
.banner figcaption{margin: 0 auto; z-index:1; color:#fff; text-align:center; width:90%; align-self:center; }

bearbeiten 3:

, wenn Sie die Höhe des Bildes verwendet werden soll, nicht ändern alles, nur hinzufügen, links: 5%:

.banner{display:flex; overflow:hidden; justify-content:center; position:relative; width:350px;} 
.banner figcaption{position:absolute; left: 5%; z-index:1; color:#fff; text-align:center; width:90%; align-self:center; background:#f00;}

Quelle

2017-02-06 08:37:10 A7S

Entschuldigung, aber es hat nicht funktioniert.kannst du auf jsfiddle –

überprüfen, wenn du das Bild als Hintergrund zum Banner haben möchtest, dann solltest du ihm die absolute Position – A7S

geben, aber dann muss ich Höhe zu .banner einstellen. Ich möchte meine Bildhöhe verwenden. –

Wie ich schon sagte in meinem Kommentar, position: absolute spielt in den meisten Browsern nicht wirklich gut mit flexbox.

Hier sind einige Lösungen, die das gleiche Ergebnis haben.

Flexbox Lösung mit Bild als Hintergrund:
https://jsfiddle.net/PaulvdDool/v8L99tp4/1/

Flexbox Lösung mit Bild als loses Elemente:
https://jsfiddle.net/PaulvdDool/v8L99tp4/2/

Es kann ohne Flexbox erfolgen. Also hier zwei Fallback-Lösungen für diejenigen, die immer noch IE8 oder IE9 verwenden.

Hintergrundbild Lösung ohne Flexbox:
https://jsfiddle.net/PaulvdDool/v8L99tp4/4/

lose Bild Lösung ohne Flexbox:
https://jsfiddle.net/PaulvdDool/v8L99tp4/3/

aktualisieren
las ich Ihren Kommentar zu anderen Antwort. Sie sagten, Sie möchten, dass das Banner die Höhe des Bildes annimmt. Also hier ist diese Lösung.
https://jsfiddle.net/PaulvdDool/v8L99tp4/6/

Quelle

2017-02-06 09:40:42

Vielen Dank Paul. 6.Lösung (https://jsfiddle.net/PaulvdDool/v8L99tp4/6/) hilft mir. aber kleines Problem, figcaption nicht vertikal bei Firefox zentrieren. –

Dies sollte funktionieren https://jsfiddle.net/v8L99tp4/7/ –

vielen Dank :) –

Flexbox - Firefox zentriert absolutes Element nicht

Antwort

Verwandte Themen