CODEWITHSUNDEEP
cssreactjsbem
Kevin.a
Kevin.a

Reputation: 4296

Center component in react

Hello I have the following header component :

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>
    </>
  );
}

And a search bar component that is imported in 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>
  );
}

and the 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;
}

The produced result is this :

enter image description here

what i want is to center the searchbar inside header. But only searchbar. i would like the logo to just stay separate on the right side. When i add justify-content:center, it centers everything including logo.

How do i achieve this result? Thanks in advance

Upvotes: 0

Views: 812

Answers (1)

IAMSTR
IAMSTR

Reputation: 684

one way of doing it would be wrapping a container inside the component and you can justify content to center

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

would be like

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

in you css you could change things by

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

Upvotes: 1

Related Questions