• 북마크
  • 1:1문의
  • 새글
  • 회원가입
  • 로그인

팁 & 테크

  • Home
  • 스터디
  • 팁 & 테크

이미지 중앙정렬 방법 팁

4,814 2015.04.30 22:58

짧은주소

본문

이미지 슬라이더 등에서 이미지가 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
- 비즈팔 메일보내기 아이디로 검색 - 회원등급 : 새싹/Level 12 - 포인트 : 93,930
레벨 12
경험치 14,217

Progress Bar 43%

- 가입일 : 2015-03-24 15:01:18
- 서명 : 아무것도 하지 않으면, 아무일도 일어나지 않는다.
- 자기소개 : http://www.jobajob.co.kr (잡아잡-취업,알바정보 서비스) - BIZPAL(비즈팔) -
댓글목록

joosam님의 댓글

언제나 좋은팁 고맙습니다~~

축하합니다. 첫댓글 포인트 23포인트를 획득하였습니다.

티보리님의 댓글

감사합니다.

Total 123건 3 페이지
번호 제목 글쓴이 날짜 추천
83 red123 아이디로 검색 2015.05.23 1,910 0
82 l2zeo 아이디로 검색 2015.05.23 2,089 1
81 티보리 아이디로 검색 2015.05.21 1,543 0
80 maxform 아이디로 검색 2015.05.21 2,745 0
79 maxform 아이디로 검색 2015.05.21 1,567 0
78 이윰넷 아이디로 검색 2015.05.21 1,599 0
77 fm25 아이디로 검색 2015.05.20 2,328 0
76 fm25 아이디로 검색 2015.05.20 3,636 2
75 shadow 아이디로 검색 2015.05.20 1,707 1
74 비즈팔 아이디로 검색 2015.05.17 2,163 0
73 티보리 아이디로 검색 2015.05.11 1,782 1
72 fm25 아이디로 검색 2015.05.07 2,110 0
71 shadow 아이디로 검색 2015.05.06 4,386 0
열람 비즈팔 아이디로 검색 2015.04.30 4,815 0
69 fm25 아이디로 검색 2015.04.29 2,056 0
68 shadow 아이디로 검색 2015.04.28 3,236 1
67 fm25 아이디로 검색 2015.04.25 3,117 0
66 shadow 아이디로 검색 2015.04.24 2,601 3
65 비즈팔 아이디로 검색 2015.04.24 3,236 2
64 fm25 아이디로 검색 2015.04.23 2,289 2
LOGIN
사이드 메뉴

최신글이 없습니다.

최신글이 없습니다.

출석 랭킹

오늘의 랭킹

회원사진

닉네임

개근왕

최다1위

shadow shadow
Ranking

    출력할 랭킹이 없습니다.

  • 01 shadow
    674,374
  • 02 신비
    335,419
  • 03 가을하늘
    204,735
  • 04 mame
    202,630
  • 05 이윰MOUNT
    199,181
  • 06 미스코리아
    163,939
  • 07 레오나르도
    147,576
  • 08 테크니션
    142,655
  • 09 이윰IN
    135,258
  • 10 비온뒤맑음
    127,882
  • 01 shadow
    28,938
  • 02 joosam
    23,606
  • 03 티보리
    21,954
  • 04 홍인
    18,644
  • 05 레오나르도
    18,088
  • 06 이윰IN
    17,983
  • 07 도깨비
    16,614
  • 08 이윰EGG
    16,105
  • 09 자이언트
    14,698
  • 10 미스트
    14,379