时间戳

首页 > 解决方案 > 无法在 Bootstrap 中使用“align-items-center”垂直对齐

css - 无法在 Bootstrap 中使用“align-items-center”垂直对齐

问题描述

我是 Bootstrap 和 React JS 的新手，我正试图将我的应用程序放在垂直和水平的中心。目前此应用程序仅水平放置，并且似乎附在顶部。

function App() {
  return (
    <GlobalContextProvider>
      <div className="container">
        <div className="row justify-content-center align-items-center"> // <--- Doens't work
          <div className="col">
            <Header />
            <Main />
            <Footer />
          </div>
        </div>
      </div>
    </GlobalContextProvider>
  );
}

我尝试了不同的方法，例如 my-auto、alight-self-center 和其他方法，但由于某种原因似乎没有任何效果。你能帮忙解决这个问题吗（不使用自定义 CSS）？

标签： cssreactjsbootstrap-4alignment

解决方案

align-items-center 对齐 cols，因此您需要为要对齐的每个内容块使用一个 col，但您不应该将 cols 用于页眉、主标签和页脚标签

推荐阅读