Contao-Camp 2024
Ergebnis 1 bis 3 von 3

Thema: Inhalte mit "margin: 0 auto;" zentrieren - suuuperpeinlich!

  1. #1
    Alter Contao-Hase Avatar von kubjo
    Registriert seit
    11.01.2011.
    Ort
    Ludwigsburg
    Beiträge
    1.380

    Standard Inhalte mit "margin: 0 auto;" zentrieren - suuuperpeinlich!

    Hi Leute,
    auch nach Jahren angewedetem CSS stolpere ich jedes mal, wenn ich ein neues Projekt angehe über den geleichen Anfängerfehler/probleme:
    Die Inhalte die ich zentrieren will, wollen sich einfach nicht in die Mitte bewegen. Letztendlich klappt es immer irgendwie, aber der Weg ist immer nur Try&Error.
    Kann mir mal jemand die Bedingungen auslisten, die gegeben sein müssen, dass ich ein Artikel, Bild, oder was auch immer mit "margin: 0 auto;" in die Mitte bekomme?
    Ich werde noch kirre im Kopf!

    Danke schon mal im Voraus!


    Grüße
    JK
    Wir sind alle Würmchen, nur glaube ich, daß ich ein Glühwürmchen bin.

  2. #2
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    6.715
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Um ein Element mit margin: 0 auto; zentrieren zu können, muss es sich um ein Blockelement handeln. Außerdem muss das Element kleiner sein als der diesem Element zur Verfügung stehende Platz. Sonst ist der linke und rechte automatisch erzeugte Außenabstand gleich 0 und das Element bewegt sich keinen Milimeter.

    Bei Inlineelementen zentrierst Du mit textalign: center;
    Außerdem gibt es noch diverse Möglichkeiten bei Grid und Flexbox um Elemente zu zentrieren.
    Also so ganz pauschale Antworten gibt es da nicht.

    Kleiner Nachtrag: Auch wenn Du den Text eines Blockelementes in die Mitte bekommen willst nutzt Du textalign: center; Dabei hat das Blockelement selbst immer noch die gesamte zur Verfügung stehende Breite.

    Nachtrag 2: Vielleicht ist dieser Artikel ganz interessant für Dich https://www.drweb.de/elemente-zentrieren-css/
    Geändert von mlweb (05.11.2019 um 12:36 Uhr)
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




  3. #3
    Contao-Fan Avatar von Sioweb
    Registriert seit
    12.08.2011.
    Ort
    Düsseldorf
    Beiträge
    405
    User beschenken
    Wunschliste

    Standard

    Noch was zu den anderen Technologien:

    Für Flexbox kann ich dir noch dieses kleine Wundertool empfehlen - https://the-echoplex.net/flexyboxes/

    transform an für sich ist auch kuhl, kann aber sein dass die Schrift im Container blury wird.
    Grüße Sascha W. @Sioweb
    schadebalken.de | zurück-zu-montag.de
    +++ Programmierer von Change-Lok erfasst worden +++

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •