이미지 위에 고정적인 위치 잡기 문제입니다ㅠ

이미지 위에 고정적인 위치 잡기 문제입니다ㅠ

QA

이미지 위에 고정적인 위치 잡기 문제입니다ㅠ

본문

 

a.jpg 라는 이미지가 있을경우,

 

<div id="price">15,000</div> 

 

라는 div를 pc상태이든,모바일상태이든 같은 위치에 넣고 싶습니다.

 

top,left를 px로 할경우 모바일에선 div가 다른위치로 가있고,

%로 할 경우엔  핸드폰마다 div 위치가 다 다르네요ㅠㅠ

 

pc든 모바일이든 같은 위치에 표시될 방법좀 알려주세요ㅠ

이 질문에 댓글 쓰기 :

답변 3

그런데 이미지가 반응형이라면 width가 줄어들수록 계속 height도 줄어들텐데...

css에서 top,left, transform:translate() 3개를 퍼센테이지로 사용해보시기바랍니다..

예를들어 div가 이미지의 항상 가운데 있게 하고싶다 하시면

top:50%;left:50%;transform:translate(-50%,-50%) 등등,,

 

아니면 css에 flex모델도 괜찮은듯 싶습니다.

display:flex,

justify-content 대표적인 옵션으로 baseline,center,start,end

align-items 대표적인 옵션으로 baseline,center,start,end

 

그냥 단순하게.. 이렇게 PC,모바일의 경우를 두고

css id값을 저렇게 서로 다르게주어 조절하시는게 편할듯합니다.

 


<?php if(G5_IS_MOBILE) { // 모바일의경우 ?>
<div id="price_m">15,000</div>
<?php } else { // PC인경우 ?>
<div id="price_pc">15,000</div>
<?php } ?>
답변을 작성하시기 전에 로그인 해주세요.
전체 141
QA 내용 검색
filter #div ×

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT