Beispiel:CSS-zentrieren-6.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inhalte mit CSS zentrieren - 1</title>
<style>
nav ul {
margin: 0;
padding: 0;
gap: 0.5em;
list-style: none;
font: 1.2rem sans-serif;
}
nav.flex ul {
display: flex;
}
nav.grid ul {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 1fr;
}
@media (min-width:40em) {
nav.grid ul {
grid-template-columns: repeat(4, 1fr);
}
}
nav.flex li {
flex: 1 0 1em;
/* Items gleichmäßig breit */
}
nav a {
display: block;
height: 100%;
padding: 0.2em 0.5em;
text-decoration: none;
box-sizing: border-box;
border-radius: .2em;
background-color: hsl(44 75% 70%);
text-align: center;
align-content: center;
}
nav a:hover {
background-color: hsl(224 75% 90%);
}
nav a:any-link {
color: black;
}
</style>
</head>
<body>
<h1>Inhalte mit CSS zentrieren - 6<br>align-items:center für Blockelemente</h1>
<h2>Als Flexbox</h2>
<nav class="flex">
<ul>
<li><a href="#">selfhtml<br>Die Energie des Verstehens</a>
</li>
<li><a href="#">Forum</a>
</li>
<li><a href="#">Wiki</a>
</li>
<li><a href="#">Blog</a>
</li>
</ul>
</nav>
<hr>
<h2>Als Grid mit Mediaquery</h2>
<nav class="grid">
<ul>
<li><a href="#">selfhtml<br>Die Energie des Verstehens</a>
</li>
<li><a href="#">Forum</a>
</li>
<li><a href="#">Wiki</a>
</li>
<li><a href="#">Blog</a>
</li>
</ul>
</nav>
<main>
<p>Die Links in der Navigationsleiste werden durch display:block als Blockelement angezeigt.
Ihre Inhalte werden mit text-align und align-content zentriert.</p>
</body>
</html>
