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%
번호 | 제목 | 글쓴이 | 날짜 | 뷰 | 추천 |
---|---|---|---|---|---|
13 | 곡우 | 2016.11.22 | 13,880 | 0 | |
열람 | red123 | 2016.07.09 | 5,713 | 2 | |
11 | 이윰MOUNT | 2015.11.20 | 5,712 | 0 | |
10 | 이윰EGG | 2015.11.06 | 5,063 | 0 | |
9 | 이윰EGG | 2015.10.30 | 2,692 | 0 | |
8 | 미니언즈 | 2015.10.28 | 1,582 | 0 | |
7 | 미니언즈 | 2015.10.28 | 1,578 | 0 | |
6 | 미니언즈 | 2015.10.27 | 2,351 | 1 | |
5 | 이윰IN | 2015.10.27 | 5,763 | 1 | |
4 | 이윰MOUNT | 2015.10.26 | 7,911 | 2 | |
3 | 이윰IN | 2015.10.25 | 2,525 | 0 | |
2 | 미니언즈 | 2015.10.25 | 1,690 | 1 | |
1 | 프리피피티 | 2015.09.23 | 2,824 | 0 |
댓글목록
joosam님의 댓글
red123님 좋은 팁 감사합니다~~ 언제나 요긴하게 사용되는군요~~
축하합니다. 첫댓글 포인트 5포인트를 획득하였습니다.