web-dev-qa-db-de.com

In der Mitte vertikal ausrichten, wenn die Anzeige-Tabellenzelle nicht für Bilder funktioniert

Ich versuche, die vertikale Ausrichtung zu verwenden: Mitten in einem Layout, um manchmal Text, manchmal Bilder vertikal zu zentrieren, aber es funktioniert nur 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 habe auch eine Geige erstellt

cssvertical-alignmentcss-tables
16
Elaine Marley

Fügen Sie border: 1px solid black in Ihre img, span-Tags ein und prüfen Sie dann beide Elemente im Browser dev. Konsole. Sie werden feststellen, dass der Abstand standardmäßig 100% des übergeordneten Objekts beträgt, während das Bild eine definierte Höhe (die Höhe des tatsächlichen Bildes) hat. 

Sie richten diese Elemente also nicht wirklich relativ zum div aus, sondern richten den Text innerhalb des span-Elements relativ zum span aus. :)

Wenn Sie wirklich Tabellen für die vertikale Zentrierung verwenden möchten, finden Sie hier den richtigen Code: http://jsfiddle.net/WXLsY/

(vertical-align und display:table-cell gehen auf das übergeordnete Element, und Sie benötigen eine Wrapper-Tabelle.)

Es gibt jedoch auch andere Möglichkeiten (SO hat viele Antworten auf diese Frage, verwenden Sie einfach die Suche).

21
nice ass

Hier ist eine Möglichkeit, das Problem zu beheben:

HTML:

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

Fügen Sie Ihre img in eine span ein. Das Bild ist ein ersetztes Element, es darf keinen untergeordneten Inhalt 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;
}

Demo unter: http://jsfiddle.net/audetwebdesign/Fz6Nj/

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

4
Marc Audet

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

display: block
margin: 0 auto

der Rand: 0 Auto dient dazu, das Bild auf die Mitte auszurichten. Wenn Sie möchten, dass das Bild links ausgerichtet ist, fügen Sie dies nicht ein. Wenn Sie das Bild richtig ausrichten möchten, können Sie Folgendes hinzufügen:

float: right

Danke, G

0
Gregg Od