问如何在HTML和CSS中将动画图像和一致的文本居中显示在网页上，而不管设备类型？
EN

Stack Overflow用户

提问于 2018-06-21 04:20:56

回答 1查看 810关注 0票数 0

我尝试将动画图像放入表中，但动画在这种情况下不起作用。

我只能使用HTML和CSS来实现这一点。

我想让绿色旋转的圆圈在页面上垂直和水平居中，让logo坐在不旋转的圆圈内，让文本在它正下方每隔5秒改变一次，水平居中，不离圆圈边缘太远。

现在，使用以下代码，移动版本如下所示：

(红色圆圈圈住了徽标，它看起来也比我想要的要小)

桌面视图当前如下所示：

正如你在这里看到的，徽标在垂直方向上仍然稍微偏离中心，圆圈实际上离屏幕顶部很近，而不是中心。

到目前为止，我在HTML中有：

<div id="animatedLogo">
    <div id="loadingCircle">
        <img id="loadingLogo" src="../Content/images/HCSS_GooglePresentation_Spinner_Green.PNG" class="circle" />
    </div>
    <div id="wordLogo">
        <img id="HCSSLogo" src="../Content/images/hcss logo2.jpg" class="logo" />
    </div>
    <div id="myPhrase" class="phrase"></div>
</div>




<div class="main-container container-fluid">
    <div class="row">
        <div class="span6">
            <form method="post" action="{responseUri}">
                {responseFields}
            </form>
        </div>
    </div>
</div>

<link href="../Content/please-wait.css" rel="stylesheet" />
<script src="/Scripts/logoAnimation.js"></script>
<script src="/Scripts/formPostResponse.js"></script>

在CSS中，我有：

#animatedLogo {
    text-align: center;
}

#loadingLogo {
    animation: rotation 2.5s infinite linear;
    min-height: 100%;
    min-width: 35%;
    padding: 1% 0;
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}

#loadingCircle {
    min-height: 77%;
    min-width: 35%;
}

#wordLogo {
    width: 100%;
    height: 67%;
    position: absolute;
    top: 0;
    left: 0;
    /*padding: 5% 0;*/
    margin-top: 5%;
}

.circle {
}

.logo {
    width: 10%;
    padding: 11% 0;
}

.phrase {
    font-family: "Proxima Nova", sans-serif;
    font-size: 24px;
    font-style: oblique;
    position: absolute;
    /* top: 625px; */
    margin-left: 50%;
    /* text-align: center; */
    transform: translateX(-50%);
}

(6/20下午3:58添加)此外，我需要确保圆圈不会改变形状，变成椭圆形，就像我改变我的解决方案以适合建议的答案时所做的那样：