頁腳專案不以小尺寸為中心，但它們在更大的螢屏上

我在我的網站上發現了一些奇怪的東西：/ 我有一個看起來相當不錯的頁腳。在更大的螢屏上，專案完全居中。但是，當我轉到移動視圖時，它有點偏離（有點偏右，如果你看它，你可以清楚地知道它沒有居中）。

頁面的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;
}

它只是在較小的尺寸上關閉，我不明白為什么:(感謝任何幫助！:)

uj5u.com熱心網友回復：

使用以下語法居中對齊您的頁腳：

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

它應該在所有設備上都能正常作業。您可能必須添加媒體查詢以根據字體大小和所有內容調整某些內容。不要忘記添加回應式元標記。我希望它有幫助！

標籤：html css 用户界面 用户体验

上一篇：我嘗試在C#中創建一個lamda運算式來過濾串列，當我將變數與陣列中的專案進行比較時無法使其作業

下一篇：Tkinter根據單擊另一個按鈕串列更新按鈕串列