反应中的中心组件

Question

您好，我有以下 header 组件：

import React from 'react';
import './style.css';
import SearchBar from './SearchBar';
import logo from '../../assets/logo.png';

export default function Header() {
  return (
    <>
      <div className="header-top"></div>
      <div className="header">
        <img className="header__logo" src={logo} />
        <SearchBar />
      </div>
    </>
  );
}

以及在 Header 中导入的搜索栏组件：

import React from 'react';

export default function SearchBar() {
  return (
    <div className="search-form-container">
      <form className="search-form">
        <input
          type="text"
          className="search-form__input"
          placeholder="Zoeken naar merken of producten..."
        ></input>
      </form>
    </div>
  );
}

和 css :

.header-top {
  width: 100%;
  height: 30px;
  background: black;
  color: white;
  font-weight: bold;
}

.header {
  width: 100%;
  background: white;
  height: 60px;
  box-shadow: 0px 11px 13px -9px rgba(141, 141, 141, 0.75);
  display: flex;
  align-items: center;
}

.header__logo {
  height: 20px;
  padding-right: 100px;
  object-fit: contain;
}

.search-form__input {
  width: 700px;
  height: 45px;
  border: none;
  background: #f6f6f6;
  padding-left: 20px;
  color: black;
  border-radius: 5px;
}

生成的结果是这样的：

我想要的是将搜索栏居中放置在 header 内。但只有搜索栏。我希望徽标在右侧保持独立。当我添加 justify-content:center 时，它会将包括徽标在内的所有内容居中。

我如何获得这个结果？提前致谢

Answer 1

一种方法是在组件内包装一个容器，您可以将内容对齐

<div className="header">
        <img className="header__logo" src={logo} />
        <SearchBar />
      </div>

会像

<div className="header">
        <img className="header__logo" src={logo} />
        <div className="justify-center">
           <SearchBar />
        </div>
   </div>

你 css 你可以通过

改变一些事情

.justify-center{ display:flex; justify-content:center;}

反应中的中心组件

Center component in react

css

reactjs

bem