证明内容：中心并不在IE11

Question

工作，我有以下HTML显示具有以下装载机图像的一些内容装载机：

.LoaderText { 
 
    position: fixed; 
 
    height: 0; 
 
    width: 0; 
 
    display: flex; 
 
    justify-content: center; 
 
    top: 50%; 
 
    left: 50%; 
 
    white-space: nowrap; 
 
} 
 

 
.loader { 
 
    position: fixed; 
 
    border: 12px solid #f3f3f3; /* Light grey */ 
 
    border-top: 12px solid #3498db; /* Blue */ 
 
    border-radius: 50%; 
 
    width: 80px; 
 
    height: 80px; 
 
    animation: spin 2s linear infinite; 
 
    opacity: 0.5; 
 
    filter: Alpha(opacity=50); 
 
} 
 

 
#txtLoader { 
 
    Color: #f3f3f3; 
 
    font-size: 14px; 
 
    margin: 83px 0 0 10px; 
 
}

<div class = "LoaderText"> 
 
    <a class="loader" [ngClass]= "{busyloader: IsBusy}" ></a>   
 
    <p id = "txtLoader">{{BusyContent}}</p> 
 
</div>

这个代码在Chrome工作良好，但在IE11中不起作用。加载器映像下的{{BusyContent}}未在IE中集中对齐。 我试过align-items: center和vertical-align: middle，但没有成功。 我想解决这个问题，它应该可以在Chrome和IE中正常工作。

IE11：

铬：

可一些请提供我在同一些投入？

Answer 1

.LoaderText { 
 
    position: fixed; 
 
    height: 0; 
 
    width: 0; 
 
    display:-moz-box; 
 
    -moz-box-orient:horizontal; 
 
    -moz-box-pack:center; 
 
    -moz-box-align:center; 
 

 
    /* Safari and Chrome */ 
 
    display:-webkit-box; 
 
    -webkit-box-orient:horizontal; 
 
    -webkit-box-pack:center; 
 
    -webkit-box-align:center; 
 

 
    /* W3C */ 
 
    display:box; 
 
    box-orient:horizontal; 
 
    box-pack:center; 
 
    box-align:center; 
 

 
    /* IE10 */ 
 
    display: -ms-flexbox; 
 
    -ms-flex-align: center; 
 
    -ms-flex-pack: center; 
 
    -ms-box-orient:horizontal; 
 
    top: 50%; 
 
    left: 50%; 
 
    white-space: nowrap; 
 
} 
 

 
.loader { 
 
    position: fixed; 
 
    border: 12px solid #f3f3f3; /* Light grey */ 
 
    border-top: 12px solid #3498db; /* Blue */ 
 
    border-radius: 50%; 
 
    width: 80px; 
 
    height: 80px; 
 
    animation: spin 2s linear infinite; 
 
    opacity: 0.5; 
 
    filter: Alpha(opacity=50); 
 
} 
 

 
#txtLoader { 
 
    Color: #f3f3f3; 
 
    font-size: 14px; 
 
    margin: 83px 0 0 10px; 
 
}

<div class = "LoaderText"> 
 
    <a class="loader" [ngClass]= "{busyloader: IsBusy}" ></a>   
 
    <p id = "txtLoader">{{BusyContent}}</p> 
 
</div>

我有一些额外的属性改变你的CSS。

希望这会有所帮助。