Здравствуйте, у меня есть следующий компонент заголовка:
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>
</>
);
}
И компонент панели поиска, который импортируется в заголовок:
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;
}
Полученный результат таков:
я хочу, чтобы центрировать панель поиска внутри заголовка. Но только панель поиска. я бы хотел, чтобы логотип оставался отдельным с правой стороны. Когда я добавляю justify-content:center, он центрирует все, включая логотип.
Как мне добиться этого результата? заранее спасибо
@goto1 goto1 я не был уверен, добавлю ли я тег реакции, некоторые люди, у которых нет опыта реакции, могут бояться отвечать или что-то в этом роде
Вы просите помочь со стилем — React
не несет ответственности за этот аспект вашей страницы. Если убрать React
из этого вопроса, решение будет точно таким же.
один из способов сделать это - обернуть контейнер внутри компонента, и вы можете выровнять содержимое по центру
<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;}
Это не
React
конкретный вопрос, этоCSS
вопрос. Создайте контейнер, который обертывает вашу панель поиска и центрирует элемент (панель поиска) только внутри него с помощьюjustify-content: center
или любого другого метода, который вы предпочитаете.