Beispiel:CSS-zentrieren-2.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0;" />
  <link rel="stylesheet" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
  <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>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS-zentrieren-2.html&oldid=53848“