헤더 중앙에 이미지를 표시하는 방법은 무엇입니까?

Question

우선, 내 코드는 HTML, CSS, JS의 3개 파일을 기반으로 하며, HTML을 생성하기 위해 Bootstrap 5.1.3 프레임워크를 사용하고 있다는 점에 유의해야 합니다.

제 문제는 우선 제가 케이스 스터디로 사용하고 있는 의류 브랜드의 로고가 중앙에 있지 않고, 제목 중앙에 오도록 온갖 노력을 다 했으나 안 된다는 거에요. 또한 드롭다운 검색 엔진이 있다고 추가했습니다. 즉, 검색 아이콘을 누르면 오른쪽에 텍스트 입력을 위한 상자가 표시됩니다. 그런 일이 발생하고 해당 상자가 나타나면 로고도 나타납니다. 중앙에 오게 하려면 왼쪽으로 더 스크롤해야 하고(오른쪽에서 검색 중이기 때문에) 대체 무슨 일이 일어나고 있는지 알 수 없습니다.

이것이 컨테이너 때문일 가능성이 높다는 것을 알고 있지만 로고 컨테이너를 축소하고 중앙에 맞추려고 시도했지만 소용이 없었으며 정확히 동일하게 유지되었습니다. 당신이 나를 도울 수 있기를 바랍니다. 나는 이 프레임워크에 대해 작업하려고 노력하고 있지만 이 작은 세부 사항으로는 작업을 진행할 수 없습니다.

으아아아 으아아아 으아아아

1. 로고를 평소대로 중앙에 맞춰보았습니다
2. 로고 용기를 줄여보았습니다
3. 0
의 코드를 다시 실행해 보았습니다.

CSS를 변경하여 로고를 중앙에 배치하거나 로고의 컨테이너를 줄이려고 여러 번 시도했지만 여전히 아무런 결과도 얻지 못하고 로고는 항상 같은 부분에 머물러 있습니다.

이 작업을 수행했을 때 로고를 중앙에 배치했지만 포함 내용이 제목과 겹쳐서 제목의 어떤 부분도 선택할 수 없다는 사실을 발견했습니다.

Answer 1

먼저 .navbar-brand 中删除 width: 100%;부터 시작해 보세요.

다음 코드도 추가해야 합니다:

으아아아

모든 탐색 링크를 중앙에 배치하지만 모든 요소가 링크와 다음 코드 사이의 남은 공간을 차지하므로 주의하세요.

으아아아

검색어 입력시 로고가 움직이는 것을 방지합니다.