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

Bootstrap Navbar의 중앙에 브랜드 로고

중앙에 정렬된 지속적인 브랜드 로고가 있는 Bootstrap 3 navbar를 만들려고 합니다. "브랜드" 클래스 스타일을 사용하는 현재 접근 방식은 로고를 부분적으로 정렬하지만 다른 탐색 모음 요소의 레이아웃을 방해합니다.

이 문제를 해결하려면 대체 전략을 고려하세요.

.navbar {
    position: relative;
}
.brand {
    position: absolute;
    left: 50%;
    margin-left: -50px !important;  /* 50% of your logo width */
    display: block;
}

이 CSS는 다음과 같습니다.

1. .navbar를 position:rel로 설정하여 절대 위치 지정을 허용합니다.
2. .brand를 절대적으로 배치하고 왼쪽 중앙에 50%;.
3. 왼쪽 여백을 -50px로 설정합니다(로고 너비의 절반에 따라 조정). 위치를 지정하고 확대/축소 시 로고가 중심에서 벗어나는 것을 방지합니다.

이러한 접근 방식은 문제를 해결하고 정확한 로고를 제공합니다. 다른 탐색 모음 요소를 방해하지 않고 중앙에 배치합니다. 작업 예제는 업데이트된 Fiddle을 참조하세요.

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