CSS TailwindCSS - Image mittig setzen?

[yoyo2435x]

Hallo zusammen,

ich komme gerade bei der Image-Positionierung mit Hilfe von TailwindCSS nicht zurecht.

Ich möchte, dass das Bild auf der X-Achse und der Y-Achse mittig erscheint. Auf der Y-Achse
ist es korrekt mittig, auf der X-Achse erscheint es bei mir aber noch rechts. Hat einer eine
Idee, woran es liegen könnte?:

<div class="h-96">
    <div class="w-screen">
        <img class="object-contain object-center w-96 h-96" src="{{ asset('img/logo.png') }}">
    </div>
</div>

TailwindCSS ist korrekt installiert und eingebunden - daran kann es nicht liegen.

Grüße.

 

[Bagbag]

"erscheint". Was sagen denn die Zahlen? Ich würde behaupten, dass das CSS stimmt.

Aber warum die zweite Ebene an div?

Edit: das Zweite div macht dir einen Container in unbekannter Breite. Wenn w-96 des img da nicht übereinstimmt, kann es zu diesem natürlich nicht mittig sein, da object-center nur innerhalb des img mittig plaziert.

Aber eine Lösung, mit der du prinzipiell alles in die Mitte bekommst:

<div class="flex justify-center items-center w-96 h-96">
    <child></child>
</div>

 

[yoyo2435x]

Hab´s nochmal angepasst und das zweite DIV entfernt.
Leider noch immer nichts. Das DIV soll eine Höhe von 96 haben und das Image von 40.
Leider erscheint das Bild aber noch immer oben/rechts statt mittig.

<div class="h-96 w-screen bg-blue-100">
    <img class="object-contain object-center w-40 h-40" src="{{ asset('img/logo.png') }}">
</div>

 

[Rossie]

Mit "object-contain" wird das Bildgröße an den Container angepasst. Man muss "object-none" nutzen, damit die Bildgröße nicht geändert wird.

https://play.tailwindcss.com/NHMxOleCTK

 

[yoyo2435x]

Aber wie bekomme ich dieses Bild dann in die Mitte gesetzt (X-Achse und Y-Achse? TailwindPlay kannte ich übrigens noch nicht - top Ding.

 

[Bagbag]

Mein Beispiel mit flex hast du übersehen?

https://play.tailwindcss.com/lPpy43nBIq

 

[yoyo2435x]

Ja, das hab ich tatsächlich übersheen, sorry. So komme ich einen Schritt weiter.
Leider aber noch immer nicht ans Ziel. Vielleicht habt ihr da noch mal einen
Tipp für mich, in welche Richtung es gehen könnte?

Ich möchte unter dem mittig platzierten Bild einen Button und einen Text hinzufügen.
Mit ein bisschen Abstand.

Leider habe ich jetzt aber alles, was ich darunter platzieren möchte, rechts daneben
stehen. Kann ich das umgehen?

<div class="flex justify-center items-center w-full h-96 bg-blue-100">
    <img class="w-72 h-40 border-2 border-red-400"
          src="https://via.placeholder.com/150">
    <div class="">
          <br><!-- später Padding, zum Testen <br> -->
          <div><button>TEST</button></div>
          <br><!-- später Padding, zum Testen <br> -->
          <div><p>TEXT</p></div>
    </div>
</div>

 

[Bagbag]

Dem Container zusätzlich die Klasse flex-col geben. Mit gap-5 (oder einer anderen Zahl) fügst du Abstand hinzu.

Und zu deinen padding Kommentaren: das richtige für Abstand zu anderen Objekten wäre margin.

PS: In deinem Code ist das Bild gestreckt. Ich denke das sollte eher nicht sein? Und warum genau steckst du den button und paragraph nochmal jeweils in ein div?

https://play.tailwindcss.com/AYbmrAIPZc