• 북마크
  • 1:1문의
  • 새글
  • 회원가입
  • 로그인

HTML/CSS

  • Home
  • 스터디
  • HTML/CSS

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

5,193 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
좋아요!
1
- red123 메일보내기 아이디로 검색 - 회원등급 : 새싹/Level 10 - 포인트 : 2,792
레벨 10
경험치 10,166

Progress Bar 59%

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

joosam님의 댓글

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

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

LOGIN
사이드 메뉴

최신글이 없습니다.

최신글이 없습니다.

출석 랭킹

오늘의 랭킹

회원사진

닉네임

개근왕

최다1위

shadow shadow
Ranking

    출력할 랭킹이 없습니다.

  • 01 shadow
    674,374
  • 02 신비
    335,419
  • 03 가을하늘
    204,735
  • 04 mame
    202,630
  • 05 이윰MOUNT
    199,181
  • 06 미스코리아
    163,939
  • 07 레오나르도
    147,576
  • 08 테크니션
    142,655
  • 09 이윰IN
    135,258
  • 10 비온뒤맑음
    127,882
  • 01 shadow
    28,938
  • 02 joosam
    23,606
  • 03 티보리
    21,954
  • 04 홍인
    18,644
  • 05 레오나르도
    18,088
  • 06 이윰IN
    17,983
  • 07 도깨비
    16,614
  • 08 이윰EGG
    16,105
  • 09 자이언트
    14,698
  • 10 미스트
    14,379