React-bootstrap how to horizontally center an element only taking account of it's parent

Question

Hello, I am using react-bootstrap library. I want to center the search bar and button on the navbar. But while centering, it's also taking into account the sibling element (logo) and leaning towards the right of the page. I don't want to solve this by applying brute force minus margin-left if possible. I'm confused with these justify-content stuff. Thanks in advance.

<Navbar style={{ backgroundColor: "#D3D3D3" }}>
  <Nav className="d-flex justify-content-start">
    <NavbarBrand href="/">
      <img src={logo} alt="pokedex-logo" style={{ width: 250, marginLeft: 20 }} />
    </NavbarBrand>
  </Nav>
  <Nav className="d-flex flex-grow-1 justify-content-center">
    <Form className="d-inline-flex">
      <FormControl
        type="search"
        placeholder="Type pokemon name"
        value={search}
        onChange={e => setSearch(e.target.value)}
      />
      <Button
        style={{ backgroundColor: "#ffe031", color: "#396bba" }}
        onClick={() => history.push(`/pokemon/${search}`)}
      >
        <strong>Search</strong>
      </Button>
    </Form>
  </Nav>
</Navbar>

Answer 1

Try it like this:

<Navbar style={{ backgroundColor: "#D3D3D3", display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'start' }}>
    <NavbarBrand href="/">
        <img src={logo} alt="pokedex-logo" style={{ width: 250 }} />
    </NavbarBrand>
    <Form className="" style={{ margin: 'auto' }}>
        <FormControl type="search" placeholder="Type pokemon name" value={search} onChange={e => setSearch(e.target.value)}/>
        <Button style={{ backgroundColor: "#ffe031", color: "#396bba" }} onClick={() => history.push(`/pokemon/${search}`)}>
            <strong>Search</strong>
        </Button>
    </Form>
</Navbar>

Here, the Navbar has display flex and the flex direction is row so the logo along with the 2 search elements (text field and search button) will be shown in a row. Then alignItems:'center' centers these 3 elements vertically in the Navbar and the justifyContent: 'start' moves the 3 elements to the start of the Navbar horizontally. After this, to make the 2 elements of search come in the center, margin:'auto' is used in the Form.

---

And here's another way: (if the above code doesn't correctly align the search elements in center)

<Navbar style={{ position: 'relative', display: 'flex', backgroundColor: "#D3D3D3" }}>
    <NavbarBrand href="/" style={{float: 'left'}}>
        <img src={logo} alt="pokedex-logo" style={{ width: 250 }} />
    </NavbarBrand>
    <Form style={{ float: 'none', position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }}>
        <FormControl type="search" placeholder="Type pokemon name" value={search} onChange={e => setSearch(e.target.value)} />
        <Button style={{ backgroundColor: "#ffe031", color: "#396bba" }} onClick={() => history.push(`/pokemon/${search}`)}>
            <strong>Search</strong>
        </Button>
    </Form>
</Navbar>

In this code, the CSS properties of position and float are used. float: 'left' moves the logo to the left and the search elements have float: 'none'. The search elements use the position property to align to the center of the Navbar which has position: 'relative'.