Verschachtelte <div>-Tags zentrieren

Ich versuche mich gerade etwas in responsiven Webseiten und habe schon hin und her gebaut, aber ich habe Schwierigkeiten mit dem CSS und es bisher nicht hinbekommen. Kann mir da mal jemand die wrapper-Klasse zentrieren?


<DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>"Ein Seitentitel"</title>

    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }

      body {
        background-color: #E2EAE1;
        font-family: sans-serif;
      }

      p {
        padding-top: 0.75em;
        text-align: center;
      }

      img {
        display: block;
        margin: 0 auto
      }

      #container {
        margin: 0 auto;
      }

      #container .wrapper {
        height: 5em;
        background: #fff;
        display: table-cell;
      }

      .left_row {
        width: 3.125em;
        text-align: right;
        float: left;
      }

      .right_row {
        width: 12.500em;
        padding-left: 0.75em;
        float: left;
      }

      .right_row ul, .left_row ul {
        list-style: none;
        color: #437346;  
      }

      footer {
        clear: both;
      }

      [noparse     @med ia[/noparse] screen and (max-width:400px) {
        body {
          font-size: 75%; 
        }

        img {
          width: 75%; 
          height: auto;
        }
      }
    </style>
  </head>

  <body>
    <div id="container">
      <img src="http://forum.byte-welt.net/images/logo.png" width="295" height="210" alt="Logo">
      <img src="http://forum.byte-welt.net/images/titel.png" width="323" height="90" alt="Schriftzug">
        <p class="name">Eine Textzeile mit einem Namen</p>
        <p class="address">Musterstraße Nr. · PLZ - Musterort</p>
        <div class="wrapper">
          <div class="left_row">
            <ul>
              <li>Tel.:</li>
              <li>Fax:</li>
              <li>Mobil:</li>
              <li>eMail:</li>
            </ul>
          </div>
          <div class="right_row">
            <ul>
              <li>+49 (0) 1234-12345</li>
              <li>+49 (0) 1234-12345</li>
              <li>+49 (0) 123-1234567</li>
              <li>kontakt@domain.de</li>
            </ul>          
          </div>
          </div>
        </div>
    <footer></footer>
  </body>
</html>

Das media query wurde vom Parser umgesetzt, [noparse] mag er nicht im html-Tag parsen. Ich habe es so gelassen…

Vielleicht hilft Dir das: https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

Generell ist das Flex-Layout mittlerweile von allen aktuellen Browsern vernünftig unterstützt. Dieser Guide ist spitze, wie ich finde.

Danke, ich arbeite das mal durch.

Gerne, wenn Du damit sonst noch ein Problem bekommst, kann ich mir das am Wochenende noch einmal ansehen.

Voila


<DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>"Ein Seitentitel"</title>

    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }

      body {
        background-color: #E2EAE1;
        font-family: sans-serif;
      }

      p {
        padding-top: 0.75em;
        text-align: center;
      }

      img {
        display: block;
        margin: 0 auto
      }

      #container {
        margin: 0 auto;
      }

      #container .wrapper {
        margin: 0 auto;
        width: 15em;
        height: 5em;
        background: #fff;
        display: block;
      }

      .left_row {
        width: 3.125em;
        text-align: right;
        float: left;
      }

      .right_row {
        width: 12.500em;
        padding-left: 0.75em;
        float: left;
      }

      .right_row ul, .left_row ul {
        list-style: none;
        color: #437346;  
      }

      footer {
        clear: both;
      }

      [noparse     @med ia[/noparse] screen and (max-width:400px) {
        body {
          font-size: 75%; 
        }

        img {
          width: 75%; 
          height: auto;
        }
      }
    </style>
  </head>

  <body>
    <div id="container">
      <img src="http://forum.byte-welt.net/images/logo.png" width="295" height="210" alt="Logo">
      <img src="http://forum.byte-welt.net/images/titel.png" width="323" height="90" alt="Schriftzug">
        <p class="name">Eine Textzeile mit einem Namen</p>
        <p class="address">Musterstraße Nr. · PLZ - Musterort</p>
        <div class="wrapper">
          <div class="left_row">
            <ul>
              <li>Tel.:</li>
              <li>Fax:</li>
              <li>Mobil:</li>
              <li>eMail:</li>
            </ul>
          </div>
          <div class="right_row">
            <ul>
              <li>+49 (0) 1234-12345</li>
              <li>+49 (0) 1234-12345</li>
              <li>+49 (0) 123-1234567</li>
              <li>kontakt@domain.de</li>
            </ul>          
          </div>
          </div>
        </div>
    <footer></footer>
  </body>
</html>

Danke, sehr schön. Ich guck mal, was ich hätte einbauen müssen. CSS ist teils recht tricky.