Beispiel:CSS-zentrieren-4.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" >
  <title>Inhalte mit CSS zentrieren - 4</title>  
<style>
.inhalte-werden-zentriert {
  display: table;
  margin-left: auto;
  margin-right: auto;	
}

.zentriert  {
  display: table-cell; 
}

</style>

</head>
 
<body>
<h1>Inhalte mit CSS zentrieren - 4<br>display: table</h1>

    <h2 style="text-align:center">Meine Vorsätze für's neue Jahr:</h2>
    <div class="inhalte-werden-zentriert" id="div1">
      <div class="zentriert" id="div2">
        <ul>
          <li>aufhören mit rauchen</li>
          <li>aufhören mit trinken</li>
          <li>mehr unternehmen, d.h.
    	    <ul>
              <li>Sport treiben</li>
              <li>Abnehmen</li>
              <li>Gute Vorsätze fassen</li>
            </ul>
          </li>
          <li>Das Leben genießen!</li>
        </ul>
      </div>
    </div>

    <div class="inhalte-werden-zentriert" id="div1">
      <h2 class="zentriert">Meine Vorsätze für's neue Jahr: (nebeneinander)</h2>
      <div class="zentriert" id="div2">
        <ul>
          <li>aufhören mit rauchen</li>
          <li>aufhören mit trinken</li>
          <li>mehr unternehmen, d.h.
    	    <ul>
              <li>Sport treiben</li>
              <li>Abnehmen</li>
              <li>Gute Vorsätze fassen</li>
            </ul>
          </li>
          <li>Das Leben genießen!</li>
        </ul>
      </div>
    </div>

</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS-zentrieren-4.html&oldid=99519“