如何使响应式页脚在所有设备上水平显示？

Question

我想知道是否有更好的方法让这个响应式页脚保持水平位置（没有任何换行符），而不需要如此频繁地使用媒体查询

这是我所做的代码和定义： HTML 代码：

<footer className="footerTp">
          <div className="footer-textTp">
            <p>
              Copyright &copy; 2023 by Palace of Triumph | All Rights Reserved
            </p>
          </div>
</footer>

CSS 定义：

.footerTp {
  display: flex;
  justify-content: space-between;
  text-align: center;
  flex-wrap: wrap;
  padding: 2rem 32%;
}

.footer-textTp p {
  font-size: 1rem;
  color: #fff;
}

@media (max-width: 1335px) {
  .footerTp {
    padding: 2rem 34%;
  }

  .footer-textTp p {
    font-size: 14px;
  }
}

@media (max-width: 1315px) {
  .footerTp {
    padding: 2rem 33%;
  }
}

@media (max-width: 1240px) {
  .footerTp {
    padding: 2rem 32%;
  }
}

@media (max-width: 1170px) {
  .footerTp {
    padding: 2rem 31%;
  }
}

@media (max-width: 1110px) {
  .footerTp {
    padding: 2rem 30%;
  }
}

@media (max-width: 1055px) {
  .footerTp {
    padding: 2rem 28%;
  }
}

@media (max-width: 960px) {
  .footerTp {
    padding: 2rem 27%;
  }
}

@media (max-width: 920px) {
  .footerTp {
    padding: 2rem 26%;
  }
}

@media (max-width: 882px) {
  .footerTp {
    padding: 2rem 25%;
  }
}

@media (max-width: 847px) {
  .footerTp {
    padding: 2rem 24%;
  }
}

@media (max-width: 815px) {
  .footerTp {
    padding: 2rem 23%;
  }
}

@media (max-width: 786px) {
  .footerTp {
    padding: 2rem 22%;
  }
}

@media (max-width: 758px) {
  .footerTp {
    padding: 2rem 21%;
  }
}

@media (max-width: 732px) {
  .footerTp {
    padding: 2rem 20%;
  }
}

@media (max-width: 709px) {
  .footerTp {
    padding: 2rem 19%;
  }
}

@media (max-width: 687px) {
  .footerTp {
    padding: 2rem 18%;
  }
}

@media (max-width: 667px) {
  .footerTp {
    padding: 2rem 17%;
  }
}

@media (max-width: 647px) {
  .footerTp {
    padding: 2rem 16%;
  }
}

@media (max-width: 627px) {
  .footerTp {
    padding: 2rem 15%;
  }
}

@media (max-width: 609px) {
  .footerTp {
    padding: 2rem 14%;
  }
}

@media (max-width: 595px) {
  .footerTp {
    padding: 2rem 13%;
  }
}

我正在使用站点检查器来帮助我定义响应能力，但它表明每隔几个像素我就应该再次重置侧面填充，

是吗？或者是否有更好的方法使其在水平位置上对所有设备都有响应？

感谢您的帮助！

Answer 1

简单，只需使用

text-align: center;

，如下所示：

.footerTp{
text-align: center
}

<footer class="footerTp">
          <div class="footer-textTp">
            <p>
              Copyright &copy; 2023 by Palace of Triumph | All Rights Reserved
            </p>
          </div>
</footer>