Beispiel:CSS-Ausrichtung-4.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" >
  <title>Bilder mit display: flex positionieren</title>
  <style>
section {
  display: flex;
}
 
figure img {
  width: 100%;
}
 
.verteilt {
  align-items:center;
}
</style>
</head>
 
<body>
  <h1>Bilder mit <code>display: flex</code> positionieren</h1>
    <section>
      <figure>
        <img src="http://wiki.selfhtml.org/images/e/e9/Lauf-1-hoch.jpg" alt="Lauf an der Pegnitz - Nürnberger Tor">
        <figcaption>
          Lauf an der Pegnitz<br> 
          Nürnberger Tor
        </figcaption>
      </figure>
      <figure>
        <img src="http://wiki.selfhtml.org/images/4/4a/Lauf-2.jpg" alt="Lauf an der Pegnitz - Pegnitz">
        <figcaption>
          Lauf an der Pegnitz<br>
          Brücke über die Pegnitz
        </figcaption>
      </figure>    
      <figure>
        <img src="http://wiki.selfhtml.org/images/2/24/Lauf-3.jpg" alt="Lauf an der Pegnitz - Nürnberger Tor">
        <figcaption>
          Lauf an der Pegnitz<br>
          Mauermühle und Judenturm
        </figcaption>
      </figure>
    </section> 
 
    <h2>vertikal zentriert</h2>
    <section class="verteilt">
      <figure>
        <img src="http://wiki.selfhtml.org/images/e/e9/Lauf-1-hoch.jpg" alt="Lauf an der Pegnitz - Nürnberger Tor">
        <figcaption>
          Lauf an der Pegnitz<br> 
          Nürnberger Tor
        </figcaption>
      </figure>
      <figure>
        <img src="http://wiki.selfhtml.org/images/4/4a/Lauf-2.jpg" alt="Lauf an der Pegnitz - Pegnitz">
        <figcaption>
          Lauf an der Pegnitz<br>
          Brücke über die Pegnitz
        </figcaption>
      </figure>    
      <figure>
        <img src="http://wiki.selfhtml.org/images/2/24/Lauf-3.jpg" alt="Lauf an der Pegnitz - Nürnberger Tor">
        <figcaption>
          Lauf an der Pegnitz<br>
          Mauermühle und Judenturm
        </figcaption>
      </figure>
    </section> 
</body>
</html>