React-bootstrap如何仅考虑其父元素水平居中元素

Question

您好，我正在使用 react-bootstrap 库。我想将导航栏上的搜索栏和按钮居中。但是在居中的同时，它还考虑了兄弟元素（徽标）并倾向于页面的右侧。如果可能的话，我不想通过施加蛮力减去左边距来解决这个问题。我对这些证明内容的东西感到困惑。提前致谢。

<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

试试这样：

<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>

这里，Navbar 具有显示 flex，并且 flex 方向是行，因此徽标以及 2 个搜索元素（文本字段和搜索按钮）将显示在一行中。然后alignItems:'center' 将这 3 个元素垂直放在导航栏中，justifyContent: 'start' 将这 3 个元素移动到导航栏的开头水平。 之后，为了让搜索的两个元素居中，在Form中使用margin:'auto'。

---

还有一种方法：（如果上面的代码没有正确对齐居中的搜索元素）

<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>

在这段代码中，使用了 CSS 的 position 和 float 属性。 float: 'left' 将徽标向左移动，搜索元素具有 float: 'none'。搜索元素使用 position 属性对齐到具有position: 'relative' 的导航栏的中心。