이미지 중앙정렬 방법 팁
4,374
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
좋아요!
![](http://v2.eyoom.net/data/member/profile/bizpal.png)
5
레벨 12
경험치 14,217
Progress Bar 43%
- 가입일 : 2015-03-24 15:01:18
- 서명 : 아무것도 하지 않으면, 아무일도 일어나지 않는다.
- 자기소개 : http://www.jobajob.co.kr (잡아잡-취업,알바정보 서비스)
- BIZPAL(비즈팔) -
Total 123건 4 페이지
번호 | 제목 | 글쓴이 | 날짜 | 뷰 | 추천 |
---|---|---|---|---|---|
63 |
![]() ![]() |
2015.04.21 | 3,236 | 1 | |
62 |
![]() ![]() |
2015.04.22 | 1,805 | 0 | |
61 |
![]() ![]() |
2015.04.23 | 1,798 | 1 | |
60 |
![]() ![]() |
2015.04.23 | 2,229 | 2 | |
59 |
![]() ![]() |
2015.04.24 | 3,174 | 2 | |
58 |
![]() ![]() |
2015.04.24 | 2,542 | 3 | |
57 |
![]() ![]() |
2015.04.25 | 3,064 | 0 | |
56 |
![]() ![]() |
2015.04.28 | 3,183 | 1 | |
55 |
![]() ![]() |
2015.04.29 | 2,004 | 0 | |
열람 |
![]() ![]() |
2015.04.30 | 4,375 | 0 | |
53 |
![]() ![]() |
2015.05.06 | 4,040 | 0 | |
52 |
![]() ![]() |
2015.05.07 | 2,052 | 0 | |
51 |
![]() |
2015.05.11 | 1,738 | 1 | |
50 |
![]() ![]() |
2015.05.17 | 2,112 | 0 | |
49 |
![]() ![]() |
2015.05.20 | 1,673 | 1 | |
48 |
![]() ![]() |
2015.05.20 | 3,568 | 2 | |
47 |
![]() ![]() |
2015.05.20 | 2,059 | 0 | |
46 |
![]() ![]() |
2015.05.21 | 1,536 | 0 | |
45 |
![]() |
2015.05.21 | 1,539 | 0 | |
44 |
![]() |
2015.05.21 | 2,706 | 0 |
댓글목록
joosam님의 댓글
언제나 좋은팁 고맙습니다~~
축하합니다. 첫댓글 포인트 23포인트를 획득하였습니다.
티보리님의 댓글
감사합니다.