Vertical-Align Mitte mit Display-Tabelle-Zelle funktioniert nicht auf Bilder

Question

Ich versuche, die vertikale Ausrichtung: Mitte auf einem Layout zu verwenden, um manchmal Text, manchmal Bilder vertikal zu zentrieren, aber es arbeitet nur an Text. Kann mir jemand sagen warum?

HTML:

<div> 
    <img src="http://jsfiddle.net/img/logo.png"/> 
</div> 

<div> 
    <span> text </span> 
</div> 

CSS:

div{ 
    width:200px; 
    height:200px; 
    background-color:red; 
    display:table; 

    margin:10px; 
} 
img, span{ 
    display:table-cell; 
    vertical-align:middle; 
} 

http://jsfiddle.net/9uD8M/ ich eine Geige erstellt aswell

Answer 1

Setzen Sie border: 1px solid black auf Ihre img, span Tags, dann überprüfen Sie beide Elemente im Browser dev. Konsole. Sie werden feststellen, dass der Bereich standardmäßig auf 100% Höhe des übergeordneten Bereichs eingestellt ist, während das Bild eine definierte Höhe (die Höhe des tatsächlichen Bilds) aufweist.

Sie sind also nicht wirklich vertikal diese Elemente in Bezug auf die div Ausrichten Sie Ausrichten nur vertikal den Text innerhalb des span-Element in Bezug auf die Spanne :)

Wenn Sie wirklich Tabellen verwenden möchten für vertikale -centering, hier ist der richtige Code: http://jsfiddle.net/WXLsY/

(vertical-align und display:table-cell auf der übergeordneten gehen, und Sie müssen auf sie Wrapper Tabelle)

Aber es gibt auch andere Möglichkeiten, dies zu tun (SO hat viele Antworten auf diese Frage, benutze nur einen Sear ch)

Answer 2

Hier ist eine Möglichkeit, das Problem der Festsetzung:

HTML:

<div> 
    <span><img src="http://jsfiddle.net/img/logo.png" /></span> 
</div> 
<div> 
    <span> text </span> 
</div> 

Setzen Sie Ihre img in eine span, das Bild ist ein ersetztes Element, es kann keine Kinder Inhalte enthalten, daher funktioniert die vertikale Ausrichtung nicht.

CSS:

div { 
    width:200px; 
    height:200px; 
    background-color:red; 
    display:table; 
    margin:10px; 
} 
span { 
    display:table-cell; 
    vertical-align:middle; 
} 

Siehe Demo an: http://jsfiddle.net/audetwebdesign/Fz6Nj/

Es gibt mehrere Möglichkeiten, dies zu tun, können Sie auch display: table-cell auf das übergeordnete div Element anwenden könnte, aber das wäre ein anderer Ansatz sein.

Answer 3

Sie können versuchen, indem Sie -> line-height: 200px; Im Span-Style-Bereich denke ich, dass es funktionieren könnte.

Answer 4

Um ein Bild vertikal in einer Tabellenzelle auszurichten, müssen Sie dem Bild eine Blockanzeige geben.

display: block 
margin: 0 auto 

der Rand: 0 Auto ist das Bild auf das Zentrum auszurichten. Wenn Sie möchten, dass das Bild linksbündig ausgerichtet ist, schließen Sie dieses nicht ein. Wenn Sie das Bild nach rechts ausgerichtet möchten, können Sie hinzufügen:

float: right 

Danke, G