Warum Bild mit Winkelvariable auf schweben Ursache ist Makeln das Bild verschieben nach unten

Question

dieses Betrachten plunker example

Wir können beobachten, dass, wenn wir zu den Fliesen schweben auf (die durch ng-if Kontrolle ist) die Fliesen vertikal bekommen verschieben. Hier

ist die CSS

.tile-wrapper { 
    width: 142px; 
    height: 142px; 
    border: solid 1px #cecece; 
    margin-left: 25px; 
    display: flex; 
    align-items: center; /* align vertical */ 
    justify-content: center; /* align horizontal */ 
} 

.wrapper { 
    display: inline-block; 
} 

ich überprüfen, ob ich alles losgeworden außer

.tile-wrapper { 
    width: 142px; 
    height: 142px; 
    border: solid 1px #cecece; 
} 

.wrapper { 
    display: inline-block; 
} 

Das gleiche phenonmenon noch

passieren Ich bin nicht ganz sicher, was das Problem ist, .

Kann mir jemand helfen?

Dank

Answer 1

ein vertical-align: middle-.wrapper behebt das Problem geben. Es ist verursacht durch die display: inline-block Regel. Vergessen Sie also nicht, vertical-align zu inline-block Artikel hinzuzufügen.

.wrapper { 
    display: inline-block; 
    vertical-align: middle; 
} 

Vorschau

Plunkr: http://plnkr.co/edit/zRZ8rVo0zSJeVYxx57Rm?p=preview