使用 react-bootstrap 将行中的元素（垂直）居中

Question

我尝试使用它来使 h3 垂直居中：

const HomeDom = ()=>{
  return(
     <Row className="align-items-center">
        <Col>

    <h3 className={'display-3'}>Welcome to the Bulls Marketplace</h3>


        </Col>
      </Row>
  );
}

我也尝试了 bootstrap 文档中提到的 my-auto。

我还可以尝试将 h3 元素垂直居中吗？

更新：（我的 post 被关闭了，因为版主认为我没有阅读关于同一主题的其他问题）：

我已经尝试了以下 class 属性（来自此 post 和其他 post 与该主题有关的答案）并且 none 有效：

“my-auto”、“mx-auto”、“align-items-center”、“justify-content-center”与“d-flex”和“flex-grow”、“justify-content-正如@enix79 所建议的那样，将“d-flex”和“flex-grow”与“stack”一起放在“center”中（这只是将 H3 元素水平居中，而不是垂直居中）。奇怪的是，它在他的沙盒中有效，但在我这边却无效。我也试过：来自 How can I center elements horizontally or vertically with Twitter Bootstrap? 的“center-block”和“pagination-centered”也没有用。

其他两个 post 被版主认为与我的 post 相似，除了我已经尝试过的以外，没有提出任何建议。

话虽这么说，我的问题应该重新打开。

可能和我的路由有关？我不知道，这是我唯一的解释：（来自 app.js）：

  return(
  <stack className="vw-100 vh-100">
    <NavDom/>
      <Routes>
          <Route path='register' element={<RegisterFormDom contract={contract} account={account}/>}/>
          <Route path='wallet' element={<WalletDom contract={contract} account={account} web3Obj={web3Obj}/>}/>
          <Route path='myservices' element={<MyServicesDom contract={contract} account={account} web3Obj={web3Obj}/>}/>
          <Route path='coaches' element={<CoachesBackendDom contract={contract} account={account} web3Obj={web3Obj}/>}/>
          <Route path='home' element={<HomeDom/>}/>

      </Routes>
      <Footer/>
      </stack>


);

这是我的 HomeDom，正如 @enix79 所建议的那样，但它没有用，只使 h3 元素水平居中：

return(
      <stack className="flex-grow-1 d-flex justify-content-center p-3" >


                  <h3 className={'display-3'}>Welcome to the Bulls Marketplace</h3>



      </stack>

  );

Answer 1

在 css 中有很多居中的方法：https://www.w3.org/Style/Examples/007/center.en.html

我建议您尽可能使用 flexbox，因为它功能强大但简单。许多人只是过度使用网格。在你的情况下，你只是垂直堆叠，所以你只有一个维度。

当您使用 bootstrap 时，您可以使用它的实用程序类：https://getbootstrap.com/docs/5.1/utilities/flex/

此外，当您使用 react-bootstrap 时，还有一个抽象，称为 Stacks：https://react-bootstrap.netlify.app/layout/stack/#stacks

我创建了一个沙盒。请查看它并告诉我，如果它是您正在寻找的东西，因为我仍然不确定您要实现的目标：https://codesandbox.io/s/musing-satoshi-nhuood?file=/src/App.js

使用“align-items”和“justify-content”，您可以根据坐标轴将内容居中。正如 isherwood 在他的评论中提到的那样，h3 获得了额外的底边距。所以当你想让它居中到 100% 时，你也必须将它移除。

使用 react-bootstrap 将行中的元素（垂直）居中

Centering elements in row (vertically) with react-bootstrap

javascript

css

twitter-bootstrap

reactjs

react-bootstrap