Frage von niklasxd999, 45

Button mittig unter Bild Zentrieren HTML/CSS?

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

Hilfreichste Antwort - ausgezeichnet vom Fragesteller
von regex9, 31

Ändere den Wert des display-Properties für deinen Button:

display: inline-block;
Kommentar von regex9 ,

Oder du zentrierst den Link über das umgebende Element.

Antwort
von threadi, 30

Du musst "text-align: center" dem umgebenden p-Element geben und nicht dem a.

Hintergrund: text-align wirkt sich auf innerhalb des Elementes liegende Inline-Elemente sowie Text aus, also auf alles was in deinem Fall im p-Element ist.

Antwort
von ilovetoro, 17

Beispiel und Erklärungen für dich:
 https://jsfiddle.net/bL41kdrt/1/

Antwort
von leon31415, 11

CSS gleich. HTML so. Funktioniert das?

<section id="content">

<div>

<div id="studio"> 

<img
src="img/Gallery_Preview/Studio.jpg" alt="Studio
Aufnahmen">

<div style="text-align:center;"><p><a class="button1"
href="Studio.html">Studio</a></p></div>

</div>

</div>

</section>

Kommentar von regex9 ,

Funktionieren tut es, doch von wegen das CSS bleibe gleich. Du setzt es hier nur als Inline-Style zusammen mit einem überflüssigen zusätzlichen Element.

Kommentar von leon31415 ,

da hast du recht, man könnte es auch in das css tun.

Keine passende Antwort gefunden?

Fragen Sie die Community

Weitere Fragen mit Antworten