Intenté usar esto para centrar el h3 verticalmente:
const HomeDom = ()=>{ return( <Row className="align-items-center"> <Col> <h3 className={'display-3'}>Welcome to the Bulls Marketplace</h3> </Col> </Row> ); }También probé my-auto como se menciona en los documentos de arranque.
¿Algo más que pueda intentar para centrar el elemento h3 verticalmente?
Actualización: (Mi publicación se cerró porque los moderadores pensaron que no había leído otras preguntas sobre el mismo tema):
Ya probé los siguientes atributos de clase (de las respuestas de esta publicación y otras publicaciones sobre el tema) y ninguno funcionó:
"my-auto", "mx-auto", "align-items-center", "justify-content-center" con "d-flex" y "flex-grow", "justify-content-center" con "d -flex" y "flex-grow" junto con "stack" como propuso @enix79 (esto solo centró el elemento H3 horizontalmente, pero no verticalmente). Lo extraño es que funcionó en su caja de arena, pero no en mi extremo. También probé: "bloque central" y "centrado en paginación" de ¿Cómo puedo centrar elementos horizontal o verticalmente con Twitter Bootstrap? que tampoco funcionó.
Las otras dos publicaciones que los moderadores asociaron como similares a mis publicaciones no propusieron nada más que lo que ya había intentado.
Dicho esto, mi pregunta debe ser reabierta.
Tal vez, ¿tiene algo que ver con mi enrutamiento? No sé, esa es la única explicación que podría tener: (esto es de 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> );Este es mi HomeDom en este momento según lo propuesto por @enix79, pero no funcionó y solo centró el elemento h3 horizontalmente:
return( <stack className="flex-grow-1 d-flex justify-content-center p-3" > <h3 className={'display-3'}>Welcome to the Bulls Marketplace</h3> </stack> );Hay muchas formas de centrar las cosas en css: https://www.w3.org/Style/Examples/007/center.en.html
Le recomendaría usar flexbox tanto como sea posible, ya que es una herramienta poderosa pero simple. Mucha gente simplemente abusa de la red. En su caso, solo apila verticalmente, por lo que solo tiene una dimensión.
Cuando trabaja con bootstrap, puede usar sus clases de utilidad: https://getbootstrap.com/docs/5.1/utilities/flex/
Además, cuando usa react-bootstrap, hay una abstracción más, llamada Stacks: https://react-bootstrap.netlify.app/layout/stack/#stacks
He creado un Sandbox. Mírelo y dígame si es algo que está buscando, porque todavía no estoy seguro de lo que intenta lograr:https://codesandbox.io/s/musing-satoshi-nhuood?file=/src/App .js
Con "align-items" y "justify-content" puedes centrar tu contenido según los ejes. Como mencionó isherwood en su comentario, h3 obtiene un margen inferior adicional. Entonces, cuando quieras tenerlo centrado al 100%, también debes quitarlo.