es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Centrar imagen en la barra de navegación de bootstrap con extremos desiguales.

24 Jul, 2023 Programación

Me gustaría centrar el logotipo de la marca en mi página y actualmente está en un lateral:
Descripción de la imagen

Aquí está mi código:

export default function NavBar() {
return (
    <Navbar bg='light' fixed='top' className='navbar py-1 '>
        <Container>
            <HiOutlineMenuAlt4 />


                <Navbar.Brand className="justify-content-center">
                    <img src={publicgoodslogo}  width="120" height="65" ></img>
                </Navbar.Brand>

            <Navbar.Collapse className="justify-content-end">
                <Nav>
                    <Nav.Link><GoSearch /></Nav.Link>
                </Nav>
                <Navbar.Text>
                 Carrito:  
                </Navbar.Text>
            </Navbar.Collapse>
            <Nav>
             0
            </Nav>

        </Container>
    </Navbar>
)

Según la documentación, debería poder usar “justify-content-center”, pero eso no funciona. ¿Es porque necesito envolver el ícono del menú en algo?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para centrar el logotipo de la marca en la barra de navegación, puedes utilizar las clases d-flex y justify-content-center en el elemento <navbar.brand>. Aquí tienes el código actualizado:

    export default function NavBar() {
  return (
    <navbar bg='light' fixed='top' classname='navbar py-1'>
      <container>
        <hioutlinemenualt4></hioutlinemenualt4>

        <navbar.brand classname='d-flex justify-content-center'>
          <img src="{publicgoodslogo}" width='120' height='65' alt='Public Goods Logo'>
        </navbar.brand>

        <navbar.collapse classname='justify-content-end'>
          <nav>
            <nav.link><gosearch></gosearch></nav.link>
          </nav>
          <navbar.text>
             Carrito:
          </navbar.text>
        </navbar.collapse>
        <nav>
           0
        </nav>
      </container>
    </navbar>
  )
}

    Espero que esto ayude. Déjame saber si tienes alguna otra pregunta.</navbar.brand>

Comments are closed.