显示器内部的绝对定位：表格单元格

在IE11中，第二个图像不正确地居中垂直，而是位于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>

为什么会出现这种情况？就好像它不知道如何计算相对于其包含div的高度的顶部位置。

来源

2017-03-13 Zze

-1

第二个img不是居中，因为您已经对图像使用了“vertical-float”。 “垂直浮动”div是绝对位置。因此，要集中这个“垂直浮动”股利，写的CSS：

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

margin-left：（div width）/ 2 px; margin-top：（div height）/ 2 px;

来源

2017-03-13 03:59:10 Piyali

我已经澄清了问题。我只想将它垂直居中。 – Zze

我认为“translateY”在IE11中不起作用。我在我的文章中编辑过。 – Piyali

'translateY'由IE11支持。 http://caniuse.com/#search=translateY – Zze

非常奇怪的是，这是通过去除包含div元素的相对位置来解决的。在这种情况下，它在#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>

来源

2017-03-13 23:26:01 Zze

显示器内部的绝对定位：表格单元格

回答

相关问题