当屏幕尺寸变小时，页脚被拉到左边答案

【问题标题】：Footer is pulled to left when screen size gets smaller当屏幕尺寸变小时，页脚被拉到左边
【发布时间】：2020-11-03 01:44:16
【问题描述】：

我正在尝试使我的网站具有响应性，但是当屏幕尺寸变小时<footer> 被拉到左侧。这是照片

<footer> 上方的<p>tag 位于中间。

当屏幕尺寸变大时，250px 页脚到达它的位置。

这是 JSFiddle 中的代码：

https://jsfiddle.net/d4mwnt9q/1/

【问题讨论】：

请在您的 css 中显示媒体查询。
你没有分享你所有的 CSS - 请分享更多信息让我们帮助。
@sigil 这是我用来设置页脚样式的 css 中的所有代码
@Rob Moll 添加了他们
你能提供你使用的HTML代码吗？我怀疑您没有为 <footer> 元素定义类，并且您使用 .footer 类作为 CSS 中的选择器。

标签： html css flexbox responsive-design

【解决方案1】：

您在移动媒体查询中的表单输入产生了问题。它正在敲掉文本，您需要将其更改为：

@media screen and (max-width: 550px) {
 .form>input {
  width: 28rem;
 }
}

像这样在移动版中达到 100%

@media screen and (max-width: 550px){
   .form>input {
   width: 100%;
 }
}

然后像这样在页脚中将 p 文本居中

.footer p {
font-size: 2.4rem;
color: #fff;
margin-top: 7rem;
text-align: center;
}

【讨论】：

谢谢你的帮助，还有按钮有什么问题，当屏幕尺寸达到550像素时它会滑动到下一行，我的意思是它没有将自己定位在中心

【解决方案2】：

@Bakhodir 按钮中断到第二行，因为媒体查询的最大宽度较低。这应该有效：

@media screen and (max-width: 570px) {
  .form {
    width: 100%;
    max-width: 48rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    flex-direction: column;
    padding: 0 2rem;

  }

  .form > input {
    width: 100%;
  }

  .form > button {
    margin-top: 1rem;
  }
}

查看https://jsfiddle.net/urosevic/ruhg9djq/14/

【讨论】：