이미지 중앙정렬 방법 팁
비즈팔
2
4,369
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건 6 페이지
번호 | 제목 | 글쓴이 | 날짜 | 뷰 | 추천 |
---|---|---|---|---|---|
23 | shadow | 2015.08.17 | 3,295 | 1 | |
22 | 암스원 | 2015.07.20 | 3,486 | 1 | |
21 | 암스원 | 2015.06.30 | 3,497 | 1 | |
20 | fm25 | 2015.03.24 | 3,520 | 3 | |
19 | fm25 | 2015.05.20 | 3,565 | 2 | |
18 | 이윰EGG | 2016.08.24 | 3,657 | 0 | |
17 | 그림자밟기 | 2015.02.08 | 3,663 | 2 | |
16 | l2zeo | 2015.02.12 | 3,681 | 4 | |
15 | fm25 | 2015.06.07 | 3,701 | 0 | |
14 | eyoom | 2015.02.02 | 3,765 | 0 | |
13 | 이윰넷 | 2015.07.08 | 3,796 | 1 | |
12 | shadow | 2015.05.06 | 4,030 | 0 | |
열람 | 비즈팔 | 2015.04.30 | 4,370 | 0 | |
10 | eyoom | 2015.02.02 | 4,396 | 0 | |
9 | shadow | 2015.05.31 | 5,028 | 0 | |
8 | 김군 | 2015.03.19 | 5,338 | 2 | |
7 | shadow | 2015.10.06 | 5,353 | 1 | |
6 | l2zeo | 2015.02.17 | 5,588 | 2 | |
5 | l2zeo | 2015.09.18 | 6,645 | 0 | |
4 | 나오키 | 2015.02.24 | 7,064 | 3 |
댓글목록
joosam님의 댓글
언제나 좋은팁 고맙습니다~~
축하합니다. 첫댓글 포인트 23포인트를 획득하였습니다.
티보리님의 댓글
감사합니다.