-1

我目前正在尝试制作带有欢迎信息的动画。我希望它被放置在我的 div 的垂直中间。我将它从大字体转换为小字体，似乎大字体高度仍在影响定位还是我错了？

#barbar{
height:10%;
width: 100%;
background-color:rgba(79, 79, 90, 0.92);
bottom: 0;
position: fixed;
z-index: 3;
}

.hello{
    color: black;
    font-family: "Times New Roman";
    text-align: center;
    animation: ease;
    animation-name: gas;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-duration:2s;
    position: fixed;
    font-size: 100px;
    bottom: 700px;
    margin-left: -20%;
    white-space: nowrap;
}
@keyframes gas{
    from { font-size: 500px; bottom: 700px; margin-left: -20%;}
    to  { font-size: 12px; bottom: 0; margin-left: 15%;}
}
<div id = "barbar">
  <h3 class ='hello'> Welocme User </h3>
</div>

正如你所看到的，我h3在 div 内，但它仍然没有以某种方式最终到达我想要放置的位置。to bottom:-x%不是我正在寻找的解决方案。

4

1 回答 1

1

添加“边距底部：0；” 到您的 h3 标签。

默认情况下，浏览器会为 h3 元素添加 1em 的边距。由于“em”单位是相对于字体大小的，所以当您向元素添加“font-size: 100px”时，您还会获得 100px 的边距。

我建议使用 CSS 重置。它将清除所有浏览器的默认设置，防止它在您的页面上添加不需要的样式。它还确保您的页面在所有浏览器中看起来完全相同，因为不同的浏览器使用不同的默认值。我建议在所有页面上使用meyerweb reset 。

于 2019-11-07T17:12:22.793 回答