在IE-11中，文本对齐居中和绝对定位不能同时工作吗？

Question

以下脚本(https://jsfiddle.net/u9z76r6q/2/)不会使IE-11中的图像居中：

​

.container {
  display: block;
  width: 400px;
  height: 200px;
  text-align: center;
  border: 1px solid black;
}
span {
  position: absolute;
 
}

<a href="#" class="container">
  <span>
    <img src="https://redarrowmedia.files.wordpress.com/2012/03/arrow-logo1.png" alt="" width="40px" height="40px">    
  </span>
  </a>

​

在所有其他现代浏览器中，箭头图像居中。这是Internet Explorer中的错误吗？

Answer 1

绝对定位的元素不需要父元素的宽度，它的宽度取决于内容。不同的结果是因为不同的浏览器定位不同的跨度。将width: 100%; left: 0;添加到span。

更新:Chrome中的截图：

​

IE中的截图：

​

你可以看到，在IE中，跨度位于左侧，而在Chrome中，跨度位于中央。跨度的内容仍然对齐到中心，但跨度宽度太小而看不到它！将宽度添加到跨度，并查看内容将对齐到中心。小提琴: IE中的https://jsfiddle.net/u9z76r6q/3/监视

UPD2:实际上在Chrome span中也不在中心。它的行为类似于left: 50%;。它的左边框在中间。