Beispiel:CSS-zentrieren-3.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Inhalte mit CSS zentrieren - 3</title>  
<style>
#inhalte-werden-zentriert {
}

.zentriert  {
  text-align: center
}

</style>

</head>
 
<body>
<h1>Inhalte mit CSS zentrieren - 3<br>text-align: center</h1>

<main id="inhalte-werden-zentriert"> 
  <h2>Meine Vorsätze für's neue Jahr:</h2>
    <ul>
      <li>mehr rauchen</li>
      <li>mehr trinken</li>
      <li>auch mal nix tun</li>
      <li>und einfach das Leben genießen!</li>
    </ul>
    <h2 class="zentriert">Meine Vorsätze für's neue Jahr:</h2>
    <ul class="zentriert">
      <li>mehr rauchen</li>
      <li>mehr trinken</li>
      <li>auch mal nix tun</li>
      <li>und einfach das Leben genießen!</li>
    </ul>
    <h2>Meine Vorsätze für's neue Jahr: (extended edition)</h2>
    <ul>
      <li>mehr rauchen</li>
      <li>mehr trinken</li>
      <li>auch mal nix tun, d.h.
        <ul>
          <li>keinen Sport treiben</li>
          <li>nicht abnehmen</li>
          <li>und keine guten Vorsätze mehr fassen</li>
        </ul>
      </li>
      <li>und einfach das Leben genießen!</li>
    </ul>
    <h2 class="zentriert">Meine Vorsätze für's neue Jahr: (extended edition)</h2>
    <ul class="zentriert">
      <li>mehr rauchen</li>
      <li>mehr trinken</li>
      <li>auch mal nix tun, d.h.
        <ul>
          <li>keinen Sport treiben</li>
          <li>nicht abnehmen</li>
          <li>und keine guten Vorsätze mehr fassen</li>
        </ul>
       </li>
       <li>und einfach das Leben genießen!</li>
     </ul>

</main>
</body>
</html>