我做了一个4幻灯片的文本动画，从右到左，但我似乎无法理解如何修复这个宽度和高度错误。我希望文本总是在幻灯片中间，但如果你展开或挤压浏览器，它就会丢失。
宽度和高度显然有问题，但我似乎找不到一个合适的比例，无论你如何操纵浏览器窗口大小，都能使文本始终保持在中间。
代码如下:
.frame{
border: 2px solid red;
height: 80px;
overflow: hidden;
}
.slidewrapper{
border: 2px solid blue;
width: 400%;
height: 100%;
animation: slideshow 24s;
animation-iteration-count:infinite;
position: relative;
left: 30px;
top: -150px;
}
.slide{
text-align: center;
height: 100%;
width: 25%;
float: right;
padding-top: 4%;
font-size: 13px;
}
.p1{
background-color: hotpink;
}
.p2{
background-color: blue;
}
.p3{
background-color: teal;
}
.p4{
background-color: green;
}
@keyframes slideshow {
0%{margin-left: -10% }
25%{margin-left: -100% }
50%{ margin-left: -200% }
75%{margin-left: -300% }
}
}<div class='frame'>
<div class="slidewrapper">
<div class="slide p1" style="color: blue">
Free shipping and handling on order over $50. CODE:<i>FREE50</i>
</div>
<div class='slide p2'> <p> Summer Sale </p>
<b> Starting Soon!</b>
<i>Exceptions apply</i>
</div>
<div class='slide p3'> <p> Summer Sale </p>
<b> Starting Soon!</b>
<i>Exceptions apply</i>
</div>
<div class='slide p4'><p> Summer Sale </p>
<b> Starting Soon!</b>
<i>Exceptions apply</i>
</div>
</div>
</div>您需要指定一个固定的padding-top而不是百分比，其中填充由单位而不是屏幕尺寸决定:
.frame{
border: 2px solid red;
height: 80px;
overflow: hidden;
}
.slidewrapper{
border: 2px solid blue;
width: 400%;
height: 100%;
animation: slideshow 24s;
animation-iteration-count:infinite;
position: relative;
left: 30px;
top: -150px;
}
.slide{
text-align: center;
height: 100%;
width: 25%;
float: right;
padding-top: 150px;
font-size: 13px;
}
.p1{
background-color: hotpink;
}
.p2{
background-color: blue;
}
.p3{
background-color: teal;
}
.p4{
background-color: green;
}
@keyframes slideshow {
0%{margin-left: -10% }
25%{margin-left: -100% }
50%{ margin-left: -200% }
75%{margin-left: -300% }
}
}<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class='frame'>
<div class="slidewrapper">
<div class="slide p1" style="color: blue">Free shipping and handling on order over $50. CODE:
<i>FREE50</i></div>
<div class='slide p2'>
<p> Summer Sale </p>
<b> Starting Soon!</b>
<i>Exceptions apply</i></div>
<div class='slide p3'>
<p> Summer Sale </p>
<b> Starting Soon!</b>
<i>Exceptions apply</i></div>
<div class='slide p4'>
<p> Summer Sale </p>
<b> Starting Soon!</b>
<i>Exceptions apply</i></div>
</div>
</div>
</body>
</html>我会使用flex。我对你的代码做了一些删减，并增加了一些灵活性。你需要调整幻灯片的高度，让它有足够的空间容纳你的内容。
我没有添加任何内边距，所以请确保在幻灯片中添加一般内边距(而不仅仅是顶部内边距)，这样当文本碰到幻灯片容器的边缘时，它看起来会很漂亮。
请注意flex-direction列，它使您的文本元素像您可能希望的那样垂直堆叠，即使幻灯片应用了flex。
如果你想让所有的文本在同一行，只需删除那一行的css，它将被排序。
.frame{
border: 2px solid red;
height: 140px;
overflow: hidden;
}
.slidewrapper{
display: flex;
width: 400%;
height: 100%;
animation: slideshow 24s;
animation-iteration-count:infinite;
}
.slide{
font-size: 13px;
height: 100%;
width: 100%;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
.p1{
background-color: hotpink;
}
.p2{
background-color: blue;
}
.p3{
background-color: teal;
}
.p4{
background-color: green;
}
@keyframes slideshow {
0%{margin-left: -10% }
25%{margin-left: -100% }
50%{ margin-left: -200% }
75%{margin-left: -300% }
}
}<div class='frame'>
<div class="slidewrapper">
<div class="slide p1" style="color: blue">
Free shipping and handling on order over $50. CODE:<i>FREE50</i>
</div>
<div class='slide p2'> <p> Summer Sale </p>
<b> Starting Soon!</b>
<i>Exceptions apply</i>
</div>
<div class='slide p3'> <p> Summer Sale </p>
<b> Starting Soon!</b>
<i>Exceptions apply</i>
</div>
<div class='slide p4'><p> Summer Sale </p>
<b> Starting Soon!</b>
<i>Exceptions apply</i>
</div>
</div>
</div>