Anchor vertikal linksbündig im Grid / Flex

pauledd · 5. Juli 2019

Hi

Ich stecke mal wieder fest.

Ich habe ein Grid-Container mit einer section als einziges Feld. Ich möchte gern sämtlichen Inhalt der section vertikal und horizintal zentriert haben.

Deshalb habe ich der section display:flex verliehen und justify-content: center . Bis dahin klappt das ganz gut.

Bildschirmfoto_2019-07-05_09-03-14.png

Wie man sieht sind nun die Links insgesamt zentriert, ich hätte sie aber gern linksbündig so dass alle Download Icons übereinander sind, also linksbündig

Hier noch der bisherige Code:

index.html:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="container">
<section>
<h2>some downloads</h2>
<a href=""><img src="down_pdf.svg">Lorem ipsum dolor sit amet</a>
<a href=""><img src="down_pdf.svg">consectetur adipisicing elit</a>
<a href=""><img src="down_pdf.svg">Maxime eos id at</a>
</section>
</div>
</body>
</html>

Alles anzeigen

main.css:

Code

body{
text-align: center;
margin: 0;
padding: 0;
}
img{
height: 1.8em;
}
#container{
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"section";
height: 100vh;
background-color: aqua
}
section{
grid-area: section;
display: flex;
flex-direction: column;
justify-content: center;
}
section a{
display: block;
}

Alles anzeigen

Hat jemand eine Idee wie ich das hinbekommen könnte?

pauledd · 5. Juli 2019

Ich habe eine Lösung gefunden. Ich habe die Links in ein extra div tag gepackt und diesem linksbündig und align-self center verliehen:

main.css:

Code

...
section div{
text-align: left;
align-self: center;
}
...

Nun klappt es:

Bildschirmfoto_2019-07-05_09-16-09.png

Tags