이미지 중앙정렬 방법 팁 > 시즌3 팁 & 테크

이미지 슬라이더 등에서 이미지가 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"  이 부분이 보이시나요?

가운데 정렬 잘 되는군요. ^^

더 좋은 쪽팁 있으시면 마구마구 댓글에 달아 주세요. ^^

즐 근로자의날 되세요.