Beispiel:CSS-zentrieren-2.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>
#inhalte-werden-zentriert {
}
.zentriert {
margin-left:auto;
margin-right:auto;
border: thin solid;
}
div {
max-width: 30em;
height: 5em;
background-color: #dfac20;
}
#p1 {
width: 2em;
}
#p2 {
width: 70em;
}
</style>
</head>
<body>
<h1>Inhalte mit CSS zentrieren - 2<br>margin: auto</h1>
<main id="inhalte-werden-zentriert">
<div class="zentriert"></div>
<p class="zentriert" id="p1">Zentrieren mit CSS ist unnötig schwer.</p>
<p class="zentriert" id="p2">Fallstricke allenthalben.</p>
</main>
</body>
</html>