센터 로고 넣기

Question

누구나 다음 로고를 가운데에 배치하는 방법에 대한 조언이 있습니다. 초급 질문에 사과드립니다. 감사합니다.

http://demo.themeum.com/html/triangle/1.1/

Answer 1

inline-block있어서

.navbar-header { 
    display: block; 
    float: none; 
    text-align: center; 
} 

.navbar-header a.navbar-brand { 
    float: none; 
} 

block있어서

.navbar-header { 
    display: block; 
    float: none; 
} 

.navbar-header a.navbar-brand { 
    float: none; 
    display: block; 
} 

.navbar-header a.navbar-brand img { 
    display: block; 
    margin: auto; 
} 

flex있어서

.navbar-header { 
    display: flex; 
    float: none; 
    justify-content: center; 
} 

,617,

위의 방법은 로고를 탐색 위에 놓습니다. 네가 원하는대로 다른 방법을 볼 수는 없다. 여기

중요한 측면은 다음과 같다

1. 그 요소 선언 float 규칙을 죽여, 수레는 대부분의 경우에 표시 값을 부정.
2. 이 규칙은 중첩 된 inline 및 inline-block 요소에 적용되므로 text-align: center으로 inline-block 요소를 가운데에 배치 할 수 있습니다. 상위 요소는 block 요소 여야합니다.
3. 속기 규칙 margin: auto을 지정하여 block 요소를 가운데에 배치 할 수 있지만 실제로는 왼쪽 및 오른쪽 여백 값이 자동이어야합니다. 브라우저는 사용 가능한 공간을 계산하고 요소를 적절하게 가운데에 맞 춥니 다.
4. 에 관한 플렉스 -이없고 기존 브라우저 지원에 조금 있습니다 이전 버전의 브라우저에서 (예를 들어 IE 8 & 9), 부분 지원 (IE 10 & (11), 파이어 폭스 & 사파리와 같은 웹킷 브라우저의 일부 이전 버전 - 사실 난 아직 경험 사파리가 관련된 대부분의 경우 나쁜 지원, 비표준 구문 버전 또는 하이브리드 구문 변형은 최신 버전이 아니라 계속 지원됩니다. 앞서 설명한 접두어와 일반 위치 지정 규칙 (예 : inline-block 또는 block 메소드)을 대체해야 할 수도 있습니다.

참조 : 인 flexbox에 flex - CSS|MDN & 자세한 내용은 caniuse.com 자신을 교육, 그것의 지원은 개선되고 아주 가까운 장래에 더 많이 될, 그래서 지금에 익숙해 시작합니다.

사용자 지정 규칙을 선언 한 후 응답 스타일을 확인하십시오. 특정 중단 점이 충족 될 때 그에 따라이 변경을 수용해야 할 가능성이 큽니다.