CSS horizontale Zentrierung und Begrenzung der maximalen Breite

Eine CSS-Layout- und Stilfrage: Wie kann man die horizontale Zentrierung und die Begrenzung der maximalen Breite ausbalancieren?

Bei meiner letzten Arbeit bin ich auf folgendes Problem gestoßen:

1. Hintergrund

• Ein horizontales drei- oder zweispaltiges Layout, wobei sich der Inhalt in einer Spalte ändert;
• Bei zu wenig Inhalt muss der gesamte Inhalt in der Mitte angezeigt werden.
• Wenn zu viel Inhalt vorhanden ist, muss er entsprechend der maximalen Breite weggelassen werden.

2. Umsetzungsideen

Dem Gesamtcontainer müssen folgende Eigenschaften hinzugefügt werden:

.container {
    Anzeige: Flex;
    Inhalt ausrichten: zentriert;
}

2.1 Verwenden Sie flex:1, um Folgendes zu erreichen

Im vorherigen Code ist die Spalte, die sich ändert, auf „flex:1“ oder „flex:auto“ eingestellt. Das Problem besteht jedoch darin, dass dies den gesamten verbleibenden Platz im Container einnimmt und sich nicht automatisch entsprechend dem Inhalt anpasst.

2.2 Flex einstellen: keines zu erreichen

Das Problem dabei ist, dass bei zu viel Inhalt der überflüssige Inhalt nicht abgedeckt wird.

2.3 Keine Eigenschaften festlegen

Wenn der Inhalt in der Mitte nicht fixiert ist, legen Sie keine Flex-Attribute fest. Wenn es nicht ausreicht, denken Sie daran, es zu überschreiben:

.Klemme {
    flex: Anfangsbuchstabe;
}

Beachten Sie, dass hier „initial“ statt „none“ verwendet wird.

Achten Sie auch darauf, die Breite anderer Spalten nicht einzuschränken. Ursprünglich befand sich in der linken Spalte ein Bild und die Breite war festgelegt. Da sich in der mittleren Spalte jedoch zu viel Inhalt befand, wurde das Bild komprimiert und verformt. Daher wird dem Bild ein Min-Width-Attribut hinzugefügt.

Dies ist das Ende dieses Artikels zum horizontalen Zentrieren mit CSS und Begrenzen der maximalen Breite. Weitere Informationen zum horizontalen Zentrieren mit CSS und Begrenzen der maximalen Breite finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!