갤러리 목록이 중앙으로 오도록 할 수 있나요?
본문
반응형 웹사이트인데 이미지가 중앙에 정렬되어 보이도록 하고 싶은데 잘 안되네요...
어떻게 해야할까요?
pc에서도 중앙에 보이고 모바일에서도 중앙에 그림이 보이도록 하고 싶습니다.
갤러리 스킨은 기본 갤러리 스킨입니다. 중앙으로 오지 않으니 우측에 여백이 남아버리네요...
아니면 모바일만 사진을 좀 더 크게 표할 수 있을까요? 모바일이라서 사진이 올라가지 않네요...
어떻게 해야할까요?
pc에서도 중앙에 보이고 모바일에서도 중앙에 그림이 보이도록 하고 싶습니다.
갤러리 스킨은 기본 갤러리 스킨입니다. 중앙으로 오지 않으니 우측에 여백이 남아버리네요...
아니면 모바일만 사진을 좀 더 크게 표할 수 있을까요? 모바일이라서 사진이 올라가지 않네요...
답변 2
//1
<div>
<img src="" alt="" />
</div>
//2
<div>
<span>
<img src="" alt="" />
</span>
</div>
1번같이 div 안에 img태그가 들어가있다고 했을때 div의 width가 100%라면 img태그에 marign:0 auto 나 text-align:cneter 이걸 주시면 가운데정렬이 되요.
2번같이 width가 100%인곳 안에 태그하나 더 두고서 img가 들어가 있을때는 그 위에있는 span에 주시면되요.
자문자답합니다.
위에 드래곤된다님이 남겨주신 댓글의 내용으로는 안되어서 직접 style을 수정하였습니다...
일단, 기본 갤러리의 style.css를 열어 아래의 항목을 수정한뒤
#bo_gall #gall_ul {margin:10px 0 0;width: 게시판넓이;margin-left: auto;margin-right: auto;padding:0;list-style:none;zoom:1;text-align: center;}
@media only screen and ( min-width:767px ) and ( max-width:1000px ) {
#bo_gall #gall_ul {margin:10px 0 0;width: 게시판넓이;margin-left: auto;margin-right: auto;padding:0;list-style:none;zoom:1;text-align: center;}
}
@media only screen and ( min-width:414px ) and ( max-width:767px ) {
#bo_gall #gall_ul {margin:10px 0 0;width: 게시판넓이;margin-left: auto;margin-right: auto;padding:0;list-style:none;zoom:1;text-align: center;}
}
@media only screen and (max-width:414px) {
#bo_gall #gall_ul {margin:10px 0 0;width: 게시판넓이;margin-left: auto;margin-right: auto;padding:0;list-style:none;zoom:1;text-align: center;}
}참고로, @media의 게시판 넓이는 직접 확인하여 기재하여야 합니다. 저는 크롬의 요소검사 기능을 사용해 크기를 확인하고 입력하였는데 생각보다 괜찮게 동작하네요. 참고로, 414px의 경우에는 아이폰6+를 기준으로 한 것이고 320px에도 대응할 수 있도록 섬네일 이미지는 135px로 적용하였습니다.
예시 페이지는 아직 호스팅을 받고 있지 않아서 생략합니다...ㅠㅠ (아직 사이트 준비중이라서...)
답변을 작성하시기 전에 로그인 해주세요.
