如何在 HTML 和 CSS 中将动画图像和非动画文本居中放置在网页上，而不管设备类型如何？

Question

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

我只能使用 HTML 和 CSS 来完成这项工作。

我想在页面上将旋转的绿色圆圈在垂直和水平方向居中，让徽标位于圆圈内而不旋转，并在其下方设置每 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 a.m。 on 6/21/18 圆不再变成椭圆！然而，现在没有什么是居中的。

更新截至 9:24 上午

我们越来越近了！！

1) 我意识到我可能应该选择徽标大小与要使用的微调器大小的特定比例，这样徽标在移动版本上就不会变得太小。我正在网上搜索想法，但如果您知道一个特别适合这个项目的想法，请告诉我！

2) 现在我们需要将短语放在微调器下面，而不是放在一边。

Answer 1

更新 3

像这样从居中 class 中取出短语：

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

让我知道它是否有效。

如何在 HTML 和 CSS 中将动画图像和非动画文本居中放置在网页上，而不管设备类型如何？

How to center an animated image and unanimated text on a webpage, regardless of the device type, in HTML and CSS?

html

css

animation

device

centering