justify-content: center does not work in IE11
Question
I have the below HTML to show a loader with some content below loader image:
.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. {{BusyContent}} under the loader image is not centrally aligned in IE. I have tried with align-items: center and vertical-align: middle , but no success. I want to fix this issue and it should work properly in both Chrome and IE.
IE11:
Chrome:
Can some please provide me some inputs on the same?
2 answers
solution1
0 2019-08-22 20:25:57
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>
solution2
-4 2017-08-04 05:57:41
.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.
Hope this helps.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.