Question

我在下面的HTML中显示了一个加载器，其中包含一些加载器图像下面的内容：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

此代码在Chrome中运行良好，但在IE11中无效。加载程序映像下的{{BusyContent}}未在IE中集中对齐。我尝试了align-items: center和vertical-align: middle，但没有成功。我想解决这个问题，它应该可以在Chrome和IE中正常运行。

IE11：

Image in IE

铬：

Image in 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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

我已使用其他一些属性更改了 CSS 。

希望这有帮助。

justify-content：center在IE11中不起作用

2 个答案: