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
2 Antworten
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.
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>
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.