absolute Positionierung innerhalb der Anzeige: Tabelle-Zelle

Question

In IE11 zentriert das zweite Bild nicht korrekt vertikal und stattdessen sitzt an der Spitze des Div.

#sliderContainer #mask { 
 
    display: block; 
 
    width: 100%; 
 
    overflow-x: scroll; 
 
} 
 

 
#sliderContainer content { 
 
    position: relative; 
 
    display: table; 
 
    height: auto; 
 
    width: 200%; 
 
} 
 

 
#sliderContainer content>div { 
 
    display: table-cell; 
 
    position: relative; 
 
    width: 50%; 
 
    height: auto; 
 
    vertical-align: top; 
 
    padding: 10px 20px; 
 
    background-color: #54314e; 
 
} 
 

 
#sliderContainer content>div:last-child { 
 
    background-color: #9F4585; 
 
} 
 

 
.vertical-float { 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
}

<div id="sliderContainer" *ngIf="activeCircle > 0"> 
 
    <div id="mask"> 
 
    <content> 
 
     <div> 
 
     <div class="col-xs-4"> 
 
      <img src="http://placehold.it/350x150/ffffff/000000" /> 
 
     </div> 
 
     </div> 
 
     <!-- 
 
     --> 
 
     <div> 
 
     <div class="vertical-float"> 
 
      <img src="http://placehold.it/350x50/ffffff/000000" /> 
 
     </div> 
 
     </div> 
 
    </content> 
 
    </div> 
 
</div>

Warum ist dies der Fall? Es ist, als ob es nicht weiß, wie man die obere Position relativ zur Höhe seines enthaltenden div berechnet.

Answer 1

Zweite img ist nicht zentriert, weil Sie "vertikal-float" für Bild verwendet haben. Das "vertikal-float" div ist absolute Position. So zum Zentrum dieser "vertical-float" div, schreibt die CSS:

.vertical-float { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-left: -175px; 
    margin-top:-25px; 
} 

margin-left: (div Breite)/2 px; Rand oben: (div Höhe)/2 px;

Answer 2

Also sehr seltsam, das wird gelöst, indem die relative Positionierung des enthaltenden div-Elements entfernt wird. In diesem Fall war es auf #sliderContainer content > div.

#sliderContainer #mask { 
 
    display: block; 
 
    width: 100%; 
 
    overflow-x: scroll; 
 
} 
 

 
#sliderContainer content { 
 
    position: relative; 
 
    display: table; 
 
    height: auto; 
 
    width: 200%; 
 
} 
 

 
#sliderContainer content>div { 
 
    display: table-cell; 
 
    /*position: relative;*/ 
 
    width: 50%; 
 
    height: auto; 
 
    vertical-align: top; 
 
    padding: 10px 20px; 
 
    background-color: #54314e; 
 
} 
 

 
#sliderContainer content>div:last-child { 
 
    background-color: #9F4585; 
 
} 
 

 
.vertical-float { 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
}

<div id="sliderContainer" *ngIf="activeCircle > 0"> 
 
    <div id="mask"> 
 
    <content> 
 
     <div> 
 
     <div class="col-xs-4"> 
 
      <img src="http://placehold.it/350x150/ffffff/000000" /> 
 
     </div> 
 
     </div> 
 
     <!-- 
 
     --> 
 
     <div> 
 
     <div class="vertical-float"> 
 
      <img src="http://placehold.it/350x50/ffffff/000000" /> 
 
     </div> 
 
     </div> 
 
    </content> 
 
    </div> 
 
</div>