我有下面的 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:
Chrome :
有人可以提供一些相同的意见吗？
最佳答案
检查这是否有帮助...
<!DOCTYPE html>
<html>
<head>
<style>
body{background-color:#000000;}
.LoaderText {
position: fixed;
top: 50%;
left: 50%;
height:150px;
width:250px;
margin-left:-125px;
margin-top:-75px;
}
.loader {
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);
margin:auto;
display:block;
text-align:center;
}
#txtLoader {
Color: #f3f3f3;
font-size: 14px;
position: absolute;
left:0;
right:0;
bottom:0;
height:20px;
text-align:center;
}
</style>
</head>
<body>
<div class = "LoaderText">
<a class="loader" class= "busyloader" ></a>
<p id = "txtLoader">Content are loading. Please wait...</p>
</div>
</body>
</html>
关于html - 证明内容 : center does not work in IE11，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45484229/