CSS Flexbox Ein Text über drei Links hintereinander (nicht selbe Reihe, unterschiedl. Positionen)?
Ich wollte einen Header erstellen der 3 Sachen enthält: Einen Text in der Mitte des Headers und drei Links direkt hintereinander darunter in der Mitte. Wenn ich dann zb.
" justify-content: center;
align-items: flex-end;"
mache, dann sind alle ganz unten in der Mitte hintereinander, obwohl der Text über dem Links sein soll. Wie kann ich das ändern? Danke im Voraus! :^)
2 Antworten
Vom Beitragsersteller als hilfreich ausgezeichnet
Wenn ich richtig verstehe was du meinst, brauchst du 2 <div> container, bei dem oberen kannst du einfach text-align: center angeben,
bei dem unteren machst du dann wie vorher auch schon display: flex justify-content: center
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
HTML, Webseite, CSS
Eine Lösung könnte folgendermaßen aussehen:
HTML (Header):
<header>
<h1>Text</h1>
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</nav>
</header>
CSS:
h1 {
text-align: center;
}
ul {
column-gap: 10px;
display: flex;
justify-content: center;
list-style-type: none;
padding: 0;
}
Ja, aber die sind dann halt nicht in dem Header drin. Kann ich das ändern?