red123 메일보내기 아이디로 검색 2016.01.12 13:05

해결은 했습니다만, 모바일에서 보면 상단 왼쪽에 붙어 버리네요 ㅠㅠ

.header-title .header-logo {position:relative;width:100%;height:200px;z-index:100}
.header-title .navbar-brand {position:relative;line-height:60px;font-size:32px;font-weight:bold;padding:15px 0;position:absolute; top:50%; left:50%; margin:-100px 0 0 -250px; text-align:center;}
.header-title .navbar-brand img {height:160px;max-height:160px;}

반응형을 고려해서 수정을 해야하는데.. 마진으로 강제 적용한게 문제인것 같네요
방법을 다시 찾아봐야 겠습니다  허..

red123 메일보내기 아이디로 검색 2016.01.12 13:11

한참 보면서 코드가 왜 이렇게 되었지란 생각 뿐이네요.
다시 처음부터 살펴봐야겠네요 ㅠㅠ

red123 메일보내기 아이디로 검색 2016.01.12 13:38

일단 비슷하게 나오는 코드 입니다

.header-title .header-logo {position:relative;width:100%;height:200px;z-index:100}
.header-title .navbar-brand {position:relative;line-height:60px;font-size:32px;font-weight:bold;padding:15px 0; left:30%; }
.header-title .navbar-brand img {height:160px;max-height:160px;}
@media (max-width: 991px) {
.header-title .header-logo.logo-none {display:none;z-index:0}
.header-title .navbar-brand {position:absolute;top:10px;left:10%;height:40px;max-height:40px;line-height:40px;font-size:30px;padding:5px 0}
}

테스트가 더 필요할것 같습니다

참고로 이미지는 452px x 160px로 잡히네요

joosam 메일보내기 아이디로 검색 2016.01.12 17:00

저도 정말 궁금했던 부분인데.... 반응형이라 모바일 보기에서는 한쪽에 붙어버린다는... ㅡㅡ
red123님 해결되시면 팁을 공개 해 주세요~~

red123 메일보내기 아이디로 검색 2016.01.12 17:06

네 검색해보니 반응형은 정렬 하는 방법이 따로 있는것 같더군요
이것 저것 해봐야 하는데..

지금 당장 만들어야 하는 사항이 있어서
일단 1~2주 후 다시 들여다 봐야 할것 같아요 ㅠㅠ

joosam 메일보내기 아이디로 검색 2016.01.12 17:11

^^ 답변 감사합니다~~ 춥습니다... 건강 조심하세요~~
정말.. 반응형은 어렵워요~~

red123 메일보내기 아이디로 검색 2016.05.30 19:26

오래간만에 왔다가 사용하고 있는 코드가 생각나 첨부해 놓고 갑니다

/*---------- Header Title ----------*/
.header-title {position:relative;background:#fff}
.header-title .header-logo {position:relative;width:100%;height:200px;z-index:100}
.header-title .navbar-brand {position:relative;line-height:60px;font-size:32px;font-weight:bold;padding:15px 0; left:30%; }
.header-title .navbar-brand img {height:160px;max-height:160px;}

해당 코드는 모바일로 확인해도 작아진 사이즈로 중앙 정렬되어 출력됩니다.

헌데 모바일에서 좀 더 작게 만들고 싶은데 스타일 시트의 @media의 기존 값들을 조금씩 건딜어도
이 부분에 대한 변경 결과가 없네요
아마 새로운 값을 추가해야 할것 같은데요.. 이 부분도 알게되면 공유해 드릴게요 ^^

red123 메일보내기 아이디로 검색 2016.05.30 21:25

하다가 이 부분도 수정해 보았습니다

@media (max-width: 991px) {
.header-title .header-logo {left:10%;height:150px;width:80%}
.header-title .header-logo.logo-none {display:none;z-index:0}
.header-title .navbar-brand {position:absolute;top:10px;left:0;height:40px;max-height:40px;line-height:40px;font-size:30px;padding:0px 0}
}

로고의 사이즈를 자신이 원하는 위치만큼 잡아주세요