Button mittig unter Bild Zentrieren

#studio p {
text-align: center;
}

.button1 kann weg.

Hallo niklasxyz

Deine Angaben sind leider noch sehr dünn. Grade Anfänger sollten einen Link zu ihren bisherigen Bemühungen posten.

Grundsätzlich hat sich für Vorschaubilder mit zugehörigen Text / Links / Buttons folgendes Vorgehen bewährt:

1. Zunächst wird ein umgebender Container erstellt. Dafür eigenet sich wie in deinen Beispiel ein section-Element mit einer class. Eine id ist nur sinnvoll wenn sie auf einer Webseite technisch nur einmal auftauchen darf.

2. Für jedes Vorschaubild wird ein passender Container erstellt. Dafür ist in HTML5 aktuell das figure-Element vorgesehen. div-Elemente sollen nur noch verwendet werden, wenn es keine passenderen Elemente gibt, deshalb sind sie hier falsch.

3. In das figure-Element kommt in einer Vorschaugalerie jeweils ein Bild. Bilder sollten jeweils für die Webseite aufbereitet werden und nur so groß sein, wie sie maximal angezeigt werden sollen.

4. Der Text (in deinem Fall der Button) kommt innerhalb eines a-Elements in ein figcaption-Element. Der Text kann dann als Button gestaltet werden.

Der HTML-Quelltext kann so zum Beispiel folgendermaßen aussehen:

<section class="vorschau">
   <figure>
      <img src="http://lorempixel.com/150/80/transport/2">
      <figcaption><a href="banane.html">Banane</a></figcaption>
   </figure>
   <figure>
      <img src="http://lorempixel.com/150/80/transport/5">
      <figcaption><a href="orange.html">Orange</a></figcaption>
   </figure>
</section>

Die Elemente können dann mit folgendem CSS-Grundgerüst angesprochen werden:

.vorschau {
}
.vorschau figure {
}
.vorschau img {
}
.vorschau figcaption {
}
.vorschau a {
}

Deine bisher bekannten Vorstellungen sollten mit folgendem CSS gelöst werden können, wobei ich noch einige sinnvolle Vorgaben hinzugefügt habe:

* {
         min-width: 0;
      }
      figure {
         min-width: 0;
         max-width: 100%;
         margin: 0;
      }
      img {
         min-width: 0;
         display: block;
         max-width: 100%;
         border: 0;
      }
      .vorschau {
         display: flex;
         flex-wrap: wrap;
      }
      .vorschau figure {
         padding: 4px;
         margin: 30px;
      }
      .vorschau img {
      }
      .vorschau figcaption {
         text-align: center;
      }
      .vorschau a {
      }

Das CSS muss dann nur noch um deine noch nicht bekannten Wünsche erweitert werden.

Gruss

MrMurphy