Text ausrichten, die zweite

[Rolf B]

Hallo Jochen,

du könntest den Link zur Flexbox machen. Dieses HTML unterstellt:

<nav>
  <ul>
    <li>
      <a href="...">
        <img src="..." alt="...">
        <p>Bilder von unseren Produkten</p>
      </a>
    </li>
  </ul>
</nav>

nav li a {
   display: flex;
   gap: 0.5em;
}
nav li a img {
   flex: 0 0 auto;
}
nav li a p {
   flex: 1 0 5em;
   margin: 0;
}

Die Flexbox sorgt dafür, dass img und p nebeneinander gesetzt werden.

Mit "flex: x y z" setzt Du die Eigenschaften flex-grow (x), flex-shrink (y) und flex-basis (z). flex-grow bestimmt, ob das Element sich ausbreiten darf, wenn Platz übrig ist (0 heißt: nicht ausbreiten), flex-shrink erlaubt, dass es schmaler werden kann (0 heißt: nicht schmaler werden) und flex-basis gibt die Breite an, mit der die Berechnungen für die Breitenverteilung starten. "auto" heißt: so breit, wie das Element von sich aus ist. Bei einem Bild hast Du sicherlich irgendwo die width und height Angaben für die intrinsische Größe oder eine width-Angabe im Stylesheet, aber wenn Du eine bestimmte Größe G erzwingen willst, kannst Du die width im Stylesheet weglassen und das mit flex: 0 0 G; tun.

Für das p Element habe ich den Margin auf 0 gesetzt, der stört in der Liste, und mit flex: 1 0 5em sage ich: Basisbreite 5em (ziemlich wenig), darf nicht weiter schrumpfen, aber darf sich auf den verfügbaren Platz ausbreiten.

Die Flexbox dürfte sich dann von der Höhe her am Bild orientieren. Die Höhe der Flex-Items (also der Kind-Elemente des Flexbox-Elements) wird standardmäßig auf die Höhe der Flexbox aufgezogen (align-items:stretch), aber wenn Du z.B. willst, dass das p-Element vertikal zum Bild zentriert ist, kannst Du dem a Element auch align-items:center geben.

Flexbox im Selfwiki

Rolf