Hallo alle,

ich habe mal wieder ein Problem mit den Wiki-Cards. Auf der SVG/Tutorials Seite ist eine Card, die auf die CSS-Transforms verlinkt. Diese Card habe ich zweizeilig gemacht. Ich möchte nun die Transform-Raute vertikal in der Card zentrieren. Das ist natürlich ein nice-to-have und wenn's nicht geht, dann geht's nicht. Aber das will ich natürlich genau wissen.

Falls jemand denkt: Wieso, ist doch zentriert? - derzeit habe ich mir mit einem Füll-Div beholfen

Die Card ist natürlich nur eine von vielen, d.h. das, was ich mache, muss für alle Cards passen.

Die Idee ist, dass alle Cards über die Card-Vorlage erzeugt werden. Die erzeugt diesen HTML-Rahmen für die Cards:

<div class="card">
  <div class="card-titel">
    <div class="logo"><img ...></div>
    TITELTEXT
  <div>
  <div class="card-inhalt">
  ...
  </div>
</div>

Das Logo ist rechts gefloatet, kann also aus dem Titel hinaus und in den Inhalt hinragen und in beiden Text verdrängen. Das möchte ich auch so haben. Das .card-Element ist ein inline-size Container, was mir den Zugriff auf die cqh-Einheit verwehrt. Die hätte ich in einem size-Container, aber dann bekomme ich keine dynamische Anpassung der Höhe an den Inhalt.

Um die Transform-Raute vertikal zentrieren zu können, müsste .card-inhalt die volle Card-Höhe bekommen. Dann hätte ich diverse Möglichkeiten. Auf der Transform-Card wäre das mit height:100% möglich, aber nur, weil auf dieser Card das Titel-div nicht erzeugt wird. Wenn ich das auf anderen Cards mache, würde mir das Inhalt-div damit aus der Card hinaushängen. Ich kann daher nicht im Stylesheet grundsätzlich 100% Höhe auf den .card-inhalt geben. Ich muss es so machen, dass .card-inhalt so hoch ist, dass es in der Card den Platz unter dem Titel füllt. Es muss aber auch mindestens so hoch sein wie sein Inhalt, und die Card muss automatisch mindestens so hoch sein, dass Titel und Inhalt hineinpassen.

Wenn für den Card-Inhalt Flexbox oder Grid hinzunehme, bekomme ich einen Blockformatierungskontext auf den Titel. Das ist auch wieder Mist, weil dann das Logo im Titel eingesperrt bleibt.

Kann ich unter diesen Rahmenbedingungen nur mit CSS den .card-inhalt überhaupt die Card auffüllen lassen?

Rolf