Die vertikale Ausrichtung funktioniert nicht (HTML5)

<body>
   <div style="width:800px; height:500px; margin:0 auto; background-color: blue" >
      <div style="vertical-align:middle;"><img src="sl1.jpg" width="50%"></div>
   </div>
</body>

Dieser code nicht funktioniert... wie muss ich richten Sie das Bild vertikal?

mögliche Duplikate von Vertikal zentrieren einer div in einem anderen div-Element

InformationsquelleAutor jovanMeshkov | 2013-05-12

  1. 1

    Vertikale Mitte ausrichten funktioniert, aber Sie müssen verwenden Sie Tabelle-Zelle auf Ihr parent-element und inline-block auf das Kind.

    Diese Lösung ist nicht zur Arbeit zu gehen, im IE6 & 7.
    Dein ist der sicherere Weg, zu gehen für diejenigen.
    Aber da Sie tagged Ihre Frage mit CSS3 und HTML5 ich dachte, dass Sie don ' T care.

    Hier ist ein Beispiel

    Getestet in:

    FF3.5
    FF4
    Safari 5
    Chrome 11 & 12
    IE9
    HTML -

    <div class="cn"><div class="inner">your content</div></div>

    CSS

    div.cn {
  display: table-cell;
  width: 500px;
  height: 500px;
  vertical-align: middle;
  text-align: center;
}

div.inner {
  display: inline-block;
  width: 200px;
  height: 200px;
  text-align: left;
}

    InformationsquelleAutor Daniele

Schreibe einen Kommentar