부트 스트랩 햄버거 메뉴를 탐색 표시 줄에 수직으로 정렬하려면 어떻게합니까?

Question

나는 부트 스트랩 Studio와 함께 여행 웹 사이트를 구축하고 ->http://stackoverflowquestion.bss.design/

하나의 문제를 제외하고 지금까지 잘거야 : 나는 수직 로고에 비례 햄버거 메뉴를 정렬 어려움을 겪고 있어요.

내가 찾은 문제를 해결하는 빠른 방법은 추가하여 css에 다음되었습니다

이

button.navbar-toggle.collapsed { 
    top:42px; 
} 

이 접근 방식의 문제는 그러나됩니다 :

가

1. 화면 가져 로고는 크기가 조정으로 작지만 햄버거 메뉴는 같은 높이에 유지됩니다.
2. 사용자가 아래로 스크롤하면 전체 navbar가 축소되고 burger 메뉴가 동일한 높이로 유지됩니다.

이제는 수많은 @media 쿼리를 추가 할 수 있다는 것을 알고 있지만 엄청난 수의 코드로 끝날 것이며, 항상 버거 메뉴를 로고 중앙에 세로로 배치하는 더 좋은 방법이 있는지 궁금해하고있었습니다. ?

Answer 1

flexbox를 사용하여 의도 한대로 메뉴를 정렬 할 수 있습니다.

는 navbar-header 요소에이 추가 :

display: flex; 
align-items: center; 

Answer 2

가 절대 위치하는 경우 당신이 transform를 사용할 수 있습니다. 이처럼

:

button.navbar-toggle.collapsed { 
    top:50%; 
    transform: translateY(-50%); 
} 

사용 %는 동적으로 만들 것입니다. 이렇게하면 첫 번째 부모 내에서 위치가 relative 또는 absolute 인 세로 가운데에 배치됩니다.