Björn: Bilder vertikal aussrichten?

Hallo, ich habe auf dieser HP http://radreisen-brandenburg.de eine kleine slideshow. Die Bilder haben eine unterschiedliche Höhe und ich hätte sie gerne vertikal mittig ausgerichtet. Leider geht "vertical-align" nicht. Was kann ich machen oder geht es generell nicht?

Gruß Björn

  1. Hallo Björn,

    ich habe auf dieser HP http://radreisen-brandenburg.de eine kleine slideshow. Die Bilder haben eine unterschiedliche Höhe und ich hätte sie gerne vertikal mittig ausgerichtet. Leider geht "vertical-align" nicht. Was kann ich machen oder geht es generell nicht?

    schau mal hier http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Anzeige/display/Tabelle einer :table-cell kannst du dann vertical-align:middle; mitgeben.

    1. Hallo Björn,

      ich habe auf dieser HP http://radreisen-brandenburg.de eine kleine slideshow. Die Bilder haben eine unterschiedliche Höhe und ich hätte sie gerne vertikal mittig ausgerichtet. Leider geht "vertical-align" nicht. Was kann ich machen oder geht es generell nicht?

      schau mal hier http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Anzeige/display/Tabelle einer :table-cell kannst du dann vertical-align:middle; mitgeben.

      Danke für die schnelle Antwort. Es funktioniert, aber leider nicht so wie ich es wollte. Die Bilder werden zwar mittig ausgerichtet, aber immer gemessen am oberen Bildrand und nicht an deren vertikaler Mittelachse. Aber es macht nichts. Langfristig will ich mir sowieso Bilder im gleichen Format besorgen. Vielen Dank!

      1. Hallo

        Aber es macht nichts. Langfristig will ich mir sowieso Bilder im gleichen Format besorgen.

        Das ist im Endeffekt am sinnvollsten.

        Danke für die schnelle Antwort. Es funktioniert, aber leider nicht so wie ich es wollte. Die Bilder werden zwar mittig ausgerichtet, aber immer gemessen am oberen Bildrand und nicht an deren vertikaler Mittelachse.

        Dafür gibt es das Flexbox-Modell. Ich habe mal ein einfaches Beispiel mit 2 Bildern erstellt:

        <!DOCTYPE html>
        <html lang="de">
        <head>
           <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
           <title>Ein Bild vertikal zentrieren</title>
           <meta name="description" content="HTML5, CSS3">
           <meta name="viewport" content="width=device-width, initial-scale=1.0">
           <!-- Um alte IE HTML5-tauglich zu machen -->
           <!--[if lt IE 9]>
              <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" language="javascript" type="text/javascript"></script>
           <![endif]-->
           <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
           <style>
              /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
              header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
                 display: block;
              }
              * {
                 -moz-box-sizing: border-box;
                 box-sizing: border-box;
              }
              html {
                 font-size: 120%;
              }
              body {
                 padding: 0;
              }
              img {
                 display: block;
                 max-width: 100%;
                 padding: 0;
                 margin: 0 auto;
              }
              article {
                 width: 100%;
                 display: flex;
                 flex-wrap: wrap;
                 align-items: center;
              }
              figure {
                 width: 40%;
                 padding: 0 1%;
                 margin: 1rem 0;
              }
              section {
                 width: 60%;
                 padding: 0 1%;
                 margin: 1rem 0;
              }
           </style>
        </head>
        <body>
           <main>
              <h1>Ein Bild vertikal neben einem Text zentrieren</h1>
              <h2>1. Beispiel</h2>
              <article>
                 <figure>
                    <img src="http://images.fotocommunity.de/bilder/wildlife/fische/fische-im-gruenen-see-muehlheim-fa3495e2-522c-4f45-8baf-cb1c81df99bb.jpg" alt="See">
                 </figure>
                 <section>
                    <p>Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext.</p>
                    <p>Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden.</p>
                    <p>Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Webstandards nämlich.</p>
                    <p>Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen. So gibt es Regeln für HTML, CSS, JavaScript oder auch XML; Worte, die Sie vielleicht schon einmal von Ihrem Entwickler gehört haben.</p>
                    <p>Diese Standards sorgen dafür, dass alle Beteiligten aus einer Webseite den größten Nutzen ziehen.</p>
                    <p>Im Gegensatz zu früheren Webseiten müssen wir zum Beispiel nicht mehr zwei verschiedene Webseiten für den Internet Explorer und einen anderen Browser programmieren. Es reicht eine Seite, die - richtig angelegt - sowohl auf verschiedenen Browsern im Netz funktioniert, aber ebenso gut für den Ausdruck.</p>
                 </section>
              </article>
              <h2>2.Beispiel mit einem schmaleren Bild</h2>
              <article>
                 <figure>
                    <img src="http://www.weltreis.ch/images/thumb-IMGP8071.JPG" alt="See">
                 </figure>
                 <section>
                    <p>Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext.</p>
                    <p>Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden.</p>
                    <p>Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Webstandards nämlich.</p>
                    <p>Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen. So gibt es Regeln für HTML, CSS, JavaScript oder auch XML; Worte, die Sie vielleicht schon einmal von Ihrem Entwickler gehört haben.</p>
                    <p>Diese Standards sorgen dafür, dass alle Beteiligten aus einer Webseite den größten Nutzen ziehen.</p>
                    <p>Im Gegensatz zu früheren Webseiten müssen wir zum Beispiel nicht mehr zwei verschiedene Webseiten für den Internet Explorer und einen anderen Browser programmieren. Es reicht eine Seite, die - richtig angelegt - sowohl auf verschiedenen Browsern im Netz funktioniert, aber ebenso gut für den Ausdruck.</p>
                 </section>
              </article>
           </main>
        </body>
        </html>
        

        Das ist alles sehr flexibel. Einfach mal rumspielen, auch mit dem Zoomfaktor kleiner und größer.

        Gruss

        MrMurphy