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.
html-seminar.de/woltlab/attachment/1979/
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>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;
}Hat jemand eine Idee wie ich das hinbekommen könnte?