中心部件页脚在反应中

Question

我有这个页脚与一个固定的位置在屏幕底部。我希望它的宽度是50%的屏幕，并以它为中心。

下面是我使用TailwindCSS的组件：

export default class Footer extends Component {
    render() {
        return (
            <footer className="w-1/2 mx-auto fixed h-8 transparent bg-gray-600 bottom-0 flex items-center">
                <div className="flex justify-center w-100">
                    <a href="https://github.com/brazillierjo" className="mx-5" target="blank">
                        <i className="fab fa-github text-lg text-white"></i>
                    </a>
                    <Link to="/connexion" className="mx-5">
                        <i className="fas fa-user-plus text-lg text-white"></i>
                    </Link>
                    <Link to="/waletoo" className="mx-5">
                        <i className="fas fa-info-circle text-lg text-white"></i>
                    </Link>
                </div>
            </footer>
        )
    }
}

类mx-auto不能工作，但例如，ml-5 (边距左: 1.25rem)工作。我不明白为什么？

编辑：

以下是我的自定义CSS：

@font-face {
    font-family: "SFPro";
    src: url("./fonts/SFProText.ttf") format("ttf"),
   }

   body {
       font-family: "SFPro", Arial, Helvetica, sans-serif !important;
       width: 100%;
   }

   .shadow-blue {
    box-shadow: 10px 10px lightblue;
  }

  .shadow-red {
    box-shadow: 10px 10px lightcoral;
  }

  .shadow-gray {
    box-shadow: 10px 10px lightgray;
  }

Answer 1

您可以将页脚标记样式设置为页的中心。

footer {
  width: 50%;
  margin: auto;
}