Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

337
Visualizações
Centrar elementos en fila (verticalmente) con react-bootstrap

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> );
about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

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

ingrese la descripción de la imagen aquí

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.

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda