如何在HTML和CSS中将动画图像和一致的文本居中显示在网页上，而不管设备类型？
如何在HTML和CSS中将动画图像和一致的文本居中显示在网页上，而不管设备类型？
提问于 2018-06-21 04:20:56
我尝试将动画图像放入表中，但动画在这种情况下不起作用。
我只能使用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添加)此外，我需要确保圆圈不会改变形状，变成椭圆形，就像我改变我的解决方案以适合建议的答案时所做的那样：
在上午8:19添加。在6/21/18，圆圈不再变成椭圆形！然而，现在没有任何东西是居中的。
截至上午9:24的更新
我们越来越近了！！
1)我意识到我可能应该选择徽标的大小与旋转器的大小的一定比例来使用，这样徽标在移动版本中就不会变得太小。我正在网上搜索想法，但如果你知道一个特别适合这个项目，让我知道！
2)现在我们需要把短语放在旋转器下面，而不是放在边上。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-21 04:25:12
更新3
将短语从中心类中取出，如下所示：
<div id="centered">
<div id="animatedLogo">
<div id="loadingCircle">
<img id="loadingLogo" src="../Content/images/HCSS_GooglePresentation_Spinner_Green.PNG" class="circle" />
</div>
</div>
<div id="wordLogo">
<img id="HCSSLogo" src="../Content/images/hcss logo2.jpg" class="logo" />
</div>
</div>
<div id="myPhrase" class="phrase">phrase phrase phrase phrasephrase</div>然后在css中更改以下内容：
.phrase {
font-family: "Proxima Nova", sans-serif;
font-size: 4vmin;
font-style: oblique;
position: absolute;
bottom: 20px;
width: 100%;
left: 50%;
height: 10%;
text-align: center;
transform: translateX(-50%);
}要更改较小屏幕上的内容，请使用媒体查询：
@media only screen and (max-width: 767px) {
.someClass {
color: red;
}
}更新2
好的，我已经测试过了，这个应该可以用：
html：
<div id="centered">
<div id="animatedLogo">
<div id="loadingCircle">
<img id="loadingLogo" src="../Content/images/HCSS_GooglePresentation_Spinner_Green.PNG" class="circle" />
</div>
</div>
<div id="wordLogo">
<img id="HCSSLogo" src="../Content/images/hcss logo2.jpg" class="logo" />
</div>
<div id="myPhrase" class="phrase"></div>
</div>css：
#centered {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#wordLogo {
position: absolute;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
/* height: 67%; */
/* position: absolute;
top: 0;
left: 0; */
/*padding: 5% 0;*/
/* margin-top: 5%; */
}更新
如果flexbox不工作，请尝试以下操作：
#loadingCircle, #wordLogo {
position: relative;
}
#loadingCircle img, #wordLogo img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}尝试使用flexbox：
#loadingCircle, #wordLogo {
display: flex;
justify-content: center;
align-items: center;
}让我知道它是否有效。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50956441
复制相关文章
相似问题