Button mittig unter Bild Zentrieren

niklasxyz

Hallo erstmal,
ich bin komplett neu hier also bitte entschuldigt, falls ich irgendwas nicht richtig beachte.
Zu meiner Frage: Ich möchte für eine Portfolio Site Vorschaubilder einer Gallery haben und darunter einen Zentrierten Button für den Link zu der jeweiligen Seite.
Mein Problem ist jetzt, dass der Button sich leider nicht zentrieren lässt sondern immer links gebunden ist.

Mein HTML Code:

<section id="content">
<div>
<div id="studio">
<img src="img/Gallery_Preview/Studio.jpg" alt="Studio Aufnahmen">
<p><a class="button1" href="Studio.html">Studio</a></p>
</div>
</div>
</section>

Mein Css Code:

#studio {
margin: 30px ;
padding:4px;

}
#studio img {
width: 23%;
height: auto;
}
.button1 {
text-align: center;
width: 100%;
}

P.s. ich bin Anfänger;)

Danke schon mal:D

djheke

Code

#studio p {
text-align: center;
}

.button1 kann weg.

MrMurphy

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:

Code

<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:

Code

.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:

Code

* {
         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 {
      }

Alles anzeigen

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

Gruss

MrMurphy

Tags