우선, 내 코드는 HTML, CSS, JS의 3개 파일을 기반으로 하며, HTML을 생성하기 위해 Bootstrap 5.1.3 프레임워크를 사용하고 있다는 점에 유의해야 합니다.
제 문제는 우선 제가 케이스 스터디로 사용하고 있는 의류 브랜드의 로고가 중앙에 있지 않고, 제목 중앙에 오도록 온갖 노력을 다 했으나 안 된다는 거에요. 또한 드롭다운 검색 엔진이 있다고 추가했습니다. 즉, 검색 아이콘을 누르면 오른쪽에 텍스트 입력을 위한 상자가 표시됩니다. 그런 일이 발생하고 해당 상자가 나타나면 로고도 나타납니다. 중앙에 오게 하려면 왼쪽으로 더 스크롤해야 하고(오른쪽에서 검색 중이기 때문에) 대체 무슨 일이 일어나고 있는지 알 수 없습니다.
이것이 컨테이너 때문일 가능성이 높다는 것을 알고 있지만 로고 컨테이너를 축소하고 중앙에 맞추려고 시도했지만 소용이 없었으며 정확히 동일하게 유지되었습니다. 당신이 나를 도울 수 있기를 바랍니다. 나는 이 프레임워크에 대해 작업하려고 노력하고 있지만 이 작은 세부 사항으로는 작업을 진행할 수 없습니다.
으아아아 으아아아 으아아아
CSS를 변경하여 로고를 중앙에 배치하거나 로고의 컨테이너를 줄이려고 여러 번 시도했지만 여전히 아무런 결과도 얻지 못하고 로고는 항상 같은 부분에 머물러 있습니다.
이 작업을 수행했을 때 로고를 중앙에 배치했지만 포함 내용이 제목과 겹쳐서 제목의 어떤 부분도 선택할 수 없다는 사실을 발견했습니다.
먼저
.navbar-brand
中删除width: 100%;
부터 시작해 보세요.다음 코드도 추가해야 합니다:
으아아아모든 탐색 링크를 중앙에 배치하지만 모든 요소가 링크와 다음 코드 사이의 남은 공간을 차지하므로 주의하세요.
으아아아검색어 입력시 로고가 움직이는 것을 방지합니다.