Loading the content...

HTML/CSS

  • Home
  • 스터디
  • HTML/CSS

index.php main logo 가운데 정렬 방법

5,259 2016.07.09 15:21

짧은주소

본문

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

 

 

 

2
좋아요!
- red123 메일보내기 아이디로 검색 - 회원등급 : 새싹/Level 10 - 포인트 : 2,792
레벨 10
경험치 10,166

Progress Bar 59%

- 가입일 : 2015-03-16 21:00:17
- 서명 :
- 자기소개 :
댓글목록

joosam님의 댓글

red123님  좋은 팁 감사합니다~~ 언제나 요긴하게 사용되는군요~~

축하합니다. 첫댓글 포인트 5포인트를 획득하였습니다.