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>
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?