页脚项目不以小尺寸为中心，但它们在更大的屏幕上

Question

我在我的网站上发现了一些奇怪的东西 :/ 我有一个看起来相当不错的页脚。在更大的屏幕上，项目完美居中。但是，当我转到移动视图时，它有点偏离（有点向右，如果你看它，你可以清楚地知道它没有居中）。

页面的html是这样的：

import * as React from "react"
import * as styles from "./footer.module.css"

import { Link } from "gatsby"

const currentYear = new Date().getFullYear()

const Footer = () => {
  return (
    <footer className={styles.flexFooter}>
      <section className={styles.footerTopSection}>
        <ul className={styles.footerTopList}>
          <li>
            <h4>
              <Link to="/home" className={styles.footerLogo}>
                Humital
              </Link>
            </h4>
          </li>
        </ul>

        <ul className={styles.footerTopList}>
          <li>
            <h4>Over Humital</h4>
          </li>
          <li>
            <Link to="/about">leer ons kennen</Link>
          </li>
        </ul>

        <ul className={styles.footerTopList}>
          <li>
            <h4>Help me</h4>
          </li>
          <li>
            <Link to="/contact">Contacteer ons</Link>
          </li>
          <li>
            <Link to="https://calendly.com/somelink" target="_blank">
              get appointment
            </Link>
          </li>
        </ul>
      </section>
      <section className={styles.footerBottomSection}>
        <div className={styles.footerBottomWrapper}>
          <p>©Copyright {currentYear} Humital - Made with ❤️</p>
          <span>- All Rights Reserved -</span>
        </div>
        <div className={styles.footerBottomWrapper}>
          <Link to="/sitemap">Sitemap</Link>|
          <Link to="/privacy">Privacy Policy</Link>
        </div>
      </section>
    </footer>
  )
}

export default Footer

这个 CSS 非常简单：

.flexFooter {
  display: flex;
  flex-flow: row wrap;
  margin: 0 auto;
  width: 100%;
}
footer {
  background-color: #2b2b2b;
  opacity: 0.95;
  width: 100%;
  margin-top: auto;
  bottom: 0;
  color: whitesmoke;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: whitesmoke;
  text-transform: lowercase;
  letter-spacing: 0.2px;
}

h4 {
  font-size: clamp(1rem, 1.5vw, 2rem);
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  align-self: center;
}

/*Top Footer*/

.footerTopSection {
  width: 100%;
  text-align: center;
  padding-top: 1rem;
}
.footerTopList {
  width: 100%;
}
.footerTopList li {
  width: 100%;
}
.footerLogo {
  color: #78c0a8;
  font-size: clamp(2rem, 3.3vw, 4rem);
  text-transform: none;
  letter-spacing: normal;
}

/*Bottom footer*/
.footerBottomSection {
  width: 100%;
  padding: 1rem;
  border-top: 1px solid whitesmoke;
  margin-top: 1rem;
  text-align: center;
}
.footerBottomSection > div:first-child {
  margin: 0 auto;
  text-align: center;
}

.footerBottomWrapper {
  text-align: center;
  width: 100%;
  margin-top: 1rem;
}

.footerBottomWrapper a {
  padding: 0.5rem;
  font-weight: bold;
  font-size: 0.8rem;
  text-align: center;
}
.footerBottomWrapper > p,
.footerBottomWrapper > span {
  font-weight: lighter;
}

它只是在较小的尺寸上关闭，我不明白为什么:(感谢任何帮助！:)

Answer 1

使用以下语法将页脚居中对齐：

.flexFooter{
  display:flex;
  align-items:center;
  justify-content:center
}

它应该可以在所有设备上正常工作。您可能需要添加媒体查询来根据字体大小和所有内容调整一些内容。不要忘记添加响应元标记。希望对您有所帮助！

页脚项目不以小尺寸为中心，但它们在更大的屏幕上

Footer items not centered on small sizes, but they are on bigger screens

html

css

user-interface

user-experience