React-bootstrap, как горизонтально центрировать элемент только с учетом его родителя

avatar
Merty
9 августа 2021 в 01:16
103
1
-1

enter image description here

Здравствуйте, я использую библиотеку 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>
Источник

Ответы (1)

avatar
Zoha Malik
9 августа 2021 в 06:02
0

Попробуйте так:

<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 имеет гибкий дисплей, а направлением гибкого экрана является строка, поэтому логотип вместе с двумя элементами поиска (текстовое поле и кнопка поиска) будут отображаться в строке. Затем alignItems:'center' центрирует эти 3 элемента по вертикали в панели навигации, а justifyContent: 'start' перемещает 3 элемента в начало панели навигации по горизонтали. После этого, чтобы 2 элемента поиска оказались в центре, 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'.

Merty
9 августа 2021 в 10:32
0

Спасибо за ваш ответ, первый вариант сделал то же самое. Зато второй отлично работает. Я хотел сделать это с помощью react-bootstrap, но думаю, что потратил на это достаточно времени. Я продолжу второй подход, который вы предоставили.

Zoha Malik
9 августа 2021 в 10:59
0

Это здорово знать! И да, первый неправильно центрировал элементы поиска.