[英]justify-content: center does not work in IE11
I have the below HTML to show a loader with some content below loader image: 我在下面的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>
This code is working well in Chrome but does not work in IE11. 这段代码在Chrome中运行良好,但在IE11中不起作用。 {{BusyContent}}
under the loader image is not centrally aligned in IE. 加载程序映像下的{{BusyContent}}
在IE中未居中对齐。 I have tried with align-items: center
and vertical-align: middle
, but no success. 我尝试过align-items: center
和vertical-align: middle
,但是没有成功。 I want to fix this issue and it should work properly in both Chrome and IE. 我想解决此问题,它应该可以在Chrome和IE中正常工作。
IE11: IE11:
Chrome: 铬:
Can some please provide me some inputs on the same? 能否请您提供一些相同的输入?
Check if this helps... 检查是否有帮助...
<!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>
.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>
I have changed your CSS with some additional properties. 我通过一些其他属性更改了CSS 。
Hope this helps. 希望这可以帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.