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:
Beiträge von pauledd
-
-
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
Alles anzeigen<!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
Alles anzeigenbody{ 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?
-
bei normalen Containern (ohne Grid und so weiter , würde ich ein container machen mit den Backgroundbild. dann kommen da die 2 anderen Container rein und gebe den dann Background:none;
Ich habe das jetzt mit einem div gelöst dem ich einen background gegeben habe und das div selbst habe ich dann zum 1x1 grid gemacht.
-
Hi
Ich (Neuling
) spiele gerade etwas mit CSS-Grid und frage mich ob ich ein Background Image zwei verschiedenen Grid Feldern zuorden kann sodass es sich verhält als ob die zwei Felder ein Feld wären.
Mein Code ist ganz simpel. Ein Grid mit zwei Columns, einem Header und darunter zwei Felder. Ich würde gern ein background image über die Felder "start_li" und "start_re" legen
als wären beide Felder ein Feld.
html-seminar.de/woltlab/attachment/1970/
Das HTML dazu sieht so aus:
Code
Alles anzeigen<body> <div id="wrapper"> <header> <nav> <ul> <li><a href="#start">START</a></li> </ul> </nav> </header> <section id="start_li"><a id="start"></a>start_li</section> <section id="start_re">start_re</section> </div> </body>Und das CSS:
Code
Alles anzeigen#wrapper { grid-template-columns: 1fr 1fr; grid-template-areas: "header header" "start_li start_re" } #start_li{ grid-area: start_li; height: 100vh; } #start_re{ grid-area: start_re; height:100vh; }Ich habe schon die Vermutung das mein Ansatz hier falsch ist, oder gibt es doch eine Lösung?
Als Alternative hätte ich dann auch das ganze etwas anders aufgebaut. Nämlich die beiden Felder
zuerst als ein Feld implementiert, diesem ein background image gegeben und dann dieses Feld erneut
als Grid mit zwei Feldern erstellt.
