이미지 중앙정렬 방법 팁
4,375
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.23 | 1,798 | 1 | |
62 |
![]() ![]() |
2015.04.22 | 1,805 | 0 | |
61 |
![]() ![]() |
2015.04.21 | 3,236 | 1 | |
60 |
![]() ![]() |
2015.04.16 | 8,492 | 3 | |
59 |
![]() ![]() |
2015.04.15 | 2,813 | 0 | |
58 |
![]() ![]() |
2015.04.13 | 2,378 | 0 | |
57 |
![]() ![]() |
2015.04.12 | 2,821 | 1 | |
56 |
![]() ![]() |
2015.04.11 | 3,196 | 0 | |
55 |
![]() ![]() |
2015.04.10 | 1,510 | 0 | |
54 |
![]() ![]() |
2015.04.10 | 1,380 | 0 | |
53 |
![]() |
2015.04.09 | 2,052 | 2 | |
52 |
![]() |
2015.04.09 | 1,311 | 0 | |
51 |
![]() ![]() |
2015.04.09 | 1,494 | 2 | |
50 |
![]() |
2015.04.07 | 1,835 | 2 | |
49 |
![]() ![]() |
2015.04.03 | 2,555 | 2 | |
48 |
![]() ![]() |
2015.04.03 | 1,742 | 0 | |
47 |
![]() ![]() |
2015.04.02 | 1,395 | 0 | |
46 |
![]() |
2015.03.25 | 2,446 | 0 | |
45 |
![]() ![]() |
2015.03.24 | 3,525 | 3 | |
44 |
![]() ![]() |
2015.03.21 | 2,353 | 2 |
댓글목록
joosam님의 댓글
언제나 좋은팁 고맙습니다~~
축하합니다. 첫댓글 포인트 23포인트를 획득하였습니다.
티보리님의 댓글
감사합니다.