이미지 중앙정렬 방법 팁
비즈팔
2
4,296
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건 1 페이지
번호 | 제목 | 글쓴이 | 날짜 | 뷰 | 추천 |
---|---|---|---|---|---|
123 | l2zeo | 2015.10.26 | 9,437 | 0 | |
122 | 비즈팔 | 2015.04.16 | 8,468 | 3 | |
121 | shadow | 2015.06.03 | 7,973 | 0 | |
120 | 나오키 | 2015.02.24 | 7,052 | 3 | |
119 | l2zeo | 2015.09.18 | 6,561 | 0 | |
118 | l2zeo | 2015.02.17 | 5,564 | 2 | |
117 | shadow | 2015.10.06 | 5,339 | 1 | |
116 | 김군 | 2015.03.19 | 5,288 | 2 | |
115 | shadow | 2015.05.31 | 4,906 | 0 | |
114 | eyoom | 2015.02.02 | 4,383 | 0 | |
열람 | 비즈팔 | 2015.04.30 | 4,297 | 0 | |
112 | shadow | 2015.05.06 | 3,967 | 0 | |
111 | 이윰넷 | 2015.07.08 | 3,777 | 1 | |
110 | eyoom | 2015.02.02 | 3,752 | 0 | |
109 | fm25 | 2015.06.07 | 3,675 | 0 | |
108 | 이윰EGG | 2016.08.24 | 3,631 | 0 | |
107 | 그림자밟기 | 2015.02.08 | 3,613 | 2 | |
106 | l2zeo | 2015.02.12 | 3,611 | 4 | |
105 | fm25 | 2015.05.20 | 3,542 | 2 | |
104 | 암스원 | 2015.06.30 | 3,472 | 1 |
댓글목록
joosam님의 댓글
언제나 좋은팁 고맙습니다~~
축하합니다. 첫댓글 포인트 23포인트를 획득하였습니다.
티보리님의 댓글
감사합니다.