index.php main logo 가운데 정렬 방법
짧은주소
- - 짧은주소: http://v2.eyoom.net/bbs/?t=2YT 주소복사
본문
style.css의 파일에서
/*---------- Header Title ----------*/
위와 같은 주석을 찾습니다.
.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 {position:absolute; left :50%;margin-left:-226px;height:160px;max-height:160px;}
가운데 라인은 이미지가 아니라 text일 경우 적용되는 부분입니다만, 크롬 개발자 도구로 확인하면 테이블이 잡히더군요 자리를 잡지는 않는것 같으나 신경쓰이니 이미지를 사용할 저는 주석처리 했습니다.
계산 방식은 ex. div width:400px면 400/2 = 200을 마진값으로 설정 margin-left:-200px
위 부분을 이용하면 됩니다만 사실 마진값 설정이 어렵습니다.
제가 테스트한 결과 다음과 같이 설정하면 됩니다.
이미지의 높이를 160으로 설정했으니 원본 이미지는 대칭적으로 세로, 가로가 축소 된 것입니다.
오리지널 파일의 높이를 160으로 줄였을 때 가로가 얼마가 되는지 확인해 보시고
해당 가로 넓이의 /2를 해 주시면 됩니다.
저는 이미지의 배율을 확인하는데 포토스케이프를 사용해 확인했습니다 (photoscape)
아직 모바일은 적용은 안했으나 위와 같은 방법을 사용하면 될것 같습니다.
추가 -----------------------------------------
모바일은 다음과 같이 변경 하였습니다.
@media (max-width: 991px) {
.header-title .header-logo {;height:80px;}
.header-title .header-logo.logo-none {display:none;z-index:0}
.header-title .navbar-brand img {position:absolute;top:10px;left :50%;margin-left:-113px;height:80px;max-height:80px;line-height:40px;padding:0px 0}
}
위에서 사용한 방법을 기반으로
position:absolute;top:10px;left :50%;margin-left:-113px; 을 넣어 주었습니다
중요한 것은 @media 안에 있는 모든 height:를 자신이 원하는 크기로 만들어 주세요
(마진을 줄거면 img 안의 좌우높이의 여백을 고려해 넣어주시면 될것 같습니다.)
참고 사이트 : http://webdir.tistory.com/31
좋아요!
Progress Bar 59%
댓글목록
joosam님의 댓글
red123님 좋은 팁 감사합니다~~ 언제나 요긴하게 사용되는군요~~
축하합니다. 첫댓글 포인트 5포인트를 획득하였습니다.