이미지 중앙정렬 방법 팁
비즈팔
2
4,816
2015.04.30 22:58
짧은주소
- - 짧은주소: http://v2.eyoom.net/bbs/?t=Z9 주소복사
본문
이미지 슬라이더 등에서 이미지가 width보다 작을 경우 왼쪽으로 정렬이 되는데
이때 사용할 수 있는 쪽팁입니다. ^^
이미 알고 계신분은 bypass하세요. ^^
우선 css에 아래와 같이 지정합니다.
class명은 임의로 바꾸셔도 됩니다.
.latest-slider-tb .slider-img img.displayed { display: block; margin-left: auto; margin-right: auto }
그리고 html 소스에 다음과 같이 지정합니다.
아래는 이미지 슬라이더의 소스 일부입니다.
<div id="eCarousel-tb" class="latest-slider-tb carousel slide carousel-tb"> <div class="carousel-inner"> <!--{@ loop}--> <div class="item {? .index_ == 0}active{/}"> <div class="slider-img"> <!--{? .image}--> <a href="{.href}"><img class="img-responsive displayed" src="{.image}" alt="{.wr_subject}" title="{.wr_subject}"></a> <!--{:}--> <a href="{.href}"><img class="img-responsive displayed" src="../../../image/sample/no_image.jpg" alt=""></a> <!--{/}--> </div> </div> <!--{:}-->
저기 위에 <img class="img-responsive displayed" 이 부분이 보이시나요?
가운데 정렬 잘 되는군요. ^^
더 좋은 쪽팁 있으시면 마구마구 댓글에 달아 주세요. ^^
즐 근로자의날 되세요.
0
좋아요!
5
레벨 12
경험치 14,217
Progress Bar 43%
- 가입일 : 2015-03-24 15:01:18
- 서명 : 아무것도 하지 않으면, 아무일도 일어나지 않는다.
- 자기소개 : http://www.jobajob.co.kr (잡아잡-취업,알바정보 서비스)
- BIZPAL(비즈팔) -
Total 123건 4 페이지
번호 | 제목 | 글쓴이 | 날짜 | 뷰 | 추천 |
---|---|---|---|---|---|
63 | fm25 | 2015.04.23 | 1,861 | 1 | |
62 | fm25 | 2015.04.22 | 1,848 | 0 | |
61 | shadow | 2015.04.21 | 3,270 | 1 | |
60 | 비즈팔 | 2015.04.16 | 8,537 | 3 | |
59 | shadow | 2015.04.15 | 3,130 | 0 | |
58 | shadow | 2015.04.13 | 2,425 | 0 | |
57 | 레오나르도 | 2015.04.12 | 3,017 | 1 | |
56 | shadow | 2015.04.11 | 3,328 | 0 | |
55 | shadow | 2015.04.10 | 1,547 | 0 | |
54 | joosam | 2015.04.10 | 1,404 | 0 | |
53 | 미너리스 | 2015.04.09 | 2,090 | 2 | |
52 | 미너리스 | 2015.04.09 | 1,347 | 0 | |
51 | shadow | 2015.04.09 | 1,530 | 2 | |
50 | maxform | 2015.04.07 | 2,081 | 2 | |
49 | fm25 | 2015.04.03 | 2,687 | 2 | |
48 | fm25 | 2015.04.03 | 1,790 | 0 | |
47 | 비즈팔 | 2015.04.02 | 1,433 | 0 | |
46 | 김나리 | 2015.03.25 | 2,495 | 0 | |
45 | fm25 | 2015.03.24 | 3,834 | 3 | |
44 | fm25 | 2015.03.21 | 2,453 | 2 |
댓글목록
joosam님의 댓글
언제나 좋은팁 고맙습니다~~
축하합니다. 첫댓글 포인트 23포인트를 획득하였습니다.
티보리님의 댓글
감사합니다.