Bootstrap 3 Navbar에서 브랜드 로고를 중앙에 배치하는 방법은 무엇입니까?

Bootstrap Navbar 중앙에 브랜드 로고 유지

맞춤형 포지셔닝 전략을 사용하여 Bootstrap 3 navbar에서 브랜드 로고를 중앙에 배치할 수 있습니다. 제공된 코드는 괜찮은 디자인을 제공하지만 다른 navbar 요소의 정렬을 방해합니다.

이 문제를 해결하려면 다음 CSS를 고려하세요.

이 접근 방식은 다음과 같습니다.

• navbar 컨테이너를 상대적으로 배치합니다.
• 브랜드 로고를 다음으로 설정합니다. 절대 위치.
• 왼쪽: 50%로 설정하고 로고 너비의 절반(왼쪽 여백: -50px)으로 오프셋하여 로고를 가로 중앙에 배치합니다.
• !important를 사용하여 왼쪽 여백을 조정합니다. Bootstrap의 기본 설정을 재정의합니다.

이렇게 하면 작업 중에도 로고가 중앙에 유지됩니다. 확대/축소.

바이올린: [https://fiddle](링크)

위 내용은 Bootstrap 3 Navbar에서 브랜드 로고를 중앙에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!