Ergebnis 1 bis 3 von 3

Thema: Button mittig unter Bild Zentrieren

  1. #1
    HTML Newbie
    Registriert seit
    09.10.2016
    Beiträge
    2
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard Button mittig unter Bild Zentrieren

    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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Geändert von niklasxyz (09.10.2016 um 20:57 Uhr)

  2. #2
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    438
    Danke
    0
    Bekam 45 mal "Danke" in 45 Postings

    Standard AW: Button mittig unter Bild Zentrieren

    Code:
    #studio p {
    text-align: center;
    }
    .button1 kann weg.

  3. #3
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    525
    Danke
    0
    Bekam 60 mal "Danke" in 58 Postings

    Standard AW: Button mittig unter Bild Zentrieren

    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 {
          }
    Das CSS muss dann nur noch um deine noch nicht bekannten Wünsche erweitert werden.

    Gruss

    MrMurphy
    Geändert von MrMurphy (10.10.2016 um 08:04 Uhr)

  4. Folgende User finden die Antwort von MrMurphy gut:


Ähnliche Themen

  1. Tabelle mittig zentrieren
    Von TeamBob im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 26.09.2016, 16:03
  2. Hilfe Bild will nicht mittig (zentrieren)
    Von jakle im Forum HTML & CSS Forum
    Antworten: 18
    Letzter Beitrag: 20.07.2009, 19:34
  3. Ebene immer mittig auf dem Bildschirm zentrieren.
    Von krieger98 im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 18.06.2009, 08:08
  4. DIV Container mittig zentrieren
    Von martinfre im Forum HTML & CSS Forum
    Antworten: 11
    Letzter Beitrag: 14.01.2009, 12:32
  5. Website mittig auf Bildschirm zentrieren?
    Von Player140 im Forum HTML & CSS Forum
    Antworten: 36
    Letzter Beitrag: 20.01.2007, 20:05

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •