Vertikale Ausrichtung

[Rolf B]

Hallo Gunnar Bittersmann,

Ist es das?

Okay, kommt drauf an was man will. Flex ist "eindimensional" - vom wrap abgesehen, Grid ist zweidimensional. Für ein <header>-Element, was der Titel mutmaßlich sein möchte und wo alle Elemente nebeneinander stehen sollen, kann man beides verwenden. Flex ist etwas weniger Schreibarbeit, Grid bietet mehr Optionen.

Aus meiner Sicht sollte dieses CSS hinreichen, um die Frage zu beantworten. Immer unter der Annahme, dass das gezeigte Beispiel bis auf die vertikalen Abstände zum Rahmen Sigrids Wünsche erfüllt.

Ich habe border durch outline ersetzt und in Kommentar eingeschlossen, weil ich annehme, dass es hier nur um Visualisierung der Elementbox geht und keinen dauerhauften Rand. Sigrig - outline ist hierfür geeigneter, weil border die Elementgröße beeinflusst und outline nicht.

header {
  display: flex;
  justify-content: center;
  align-items: center;
/*  outline: 1px red solid; */
  gap: 2em;
}
header > * {
  margin: 0;
/* outline: thin dashed green; */
}

Die Visualisierung kann auch der Browser mit den Entwicklerwerkzeugen übernehmen. In Chrome so:

Durch Anklicken des "flex" zeigt der Browser die Elemente der Flexbox. Und die Header-Größe wird gezeigt, weil ich im Moment des Screenshots die Maus auf dieser Zeile hatte - dann wird das Element dazu hervorgehoben und die Größe gezeigt.

Rolf