证明内容：中心在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：

IE中的图片

铬：

Chrome中的图片

能否请您提供一些相同的输入？

Answer 1

检查是否有帮助...

<!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>

Answer 2

 .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 。

希望这可以帮助。

证明内容：中心在IE11中不起作用

问题描述

2 个解决方案

解决方案1
0 2019-08-22 20:25:57

解决方案2
-4 2017-08-04 05:57:41

证明内容：中心在IE11中不起作用

问题描述

2 个解决方案

解决方案1 0 2019-08-22 20:25:57

解决方案2 -4 2017-08-04 05:57:41

解决方案1
0 2019-08-22 20:25:57

解决方案2
-4 2017-08-04 05:57:41