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

Bootstrap Navbar 브랜드 로고 중앙에

Bootstrap navbar를 사용자 정의할 때 브랜드 로고의 위치가 문제가 되는 경우가 많습니다. 기본적으로 로고는 중앙에 위치하지 않을 수 있습니다. 완벽한 중앙 정렬을 달성하기 위한 단계는 다음과 같습니다.

1. 절대 위치 지정을 위한 컨테이너 만들기:

   • 다음을 사용하여 div의 탐색 모음을 래핑합니다. 클래스 "navbar"를 선택하고 해당 위치를 다음으로 설정합니다. "relative."

2. 브랜드에 절대 위치 추가:

   • 브랜드 로고의 위치 설정(클래스 "브랜드")를 "절대"로, 왼쪽 속성을 50%.

3. 여백 조정:

   • 브랜드에 음수 여백-왼쪽 속성을 추가합니다(50에 해당). 로고 너비의 %입니다. 이렇게 하면 페이지 크기 조정 중에 로고가 중앙에 유지됩니다.

4. 인라인 블록 표시:

   • 브랜드의 표시 속성을 설정합니다. 다른 탐색 표시줄과 올바르게 정렬되도록 "차단"합니다.

수정된 CSS는 다음과 같습니다.

.navbar {
    position: relative;
}
.brand {
    position: absolute;
    left: 50%;
    margin-left: -50px !important;
    display: block;
}

이 접근 방식은 탐색 모음 레이아웃의 무결성을 유지하면서 효과적으로 브랜드 로고를 중앙에 배치합니다.

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