CSS 인라인-블럭 마진 질문 입니다.


안녕하세요. django에서 랜더링한 이미지를 inline-block으로 이미지 갤러리처럼 배열 했습니다. 그런데 컨테이너 div안의 엘리먼트들을 중앙정렬하고 싶은데 방법을 모르겠네요 ㅠㅠ

이미지

HTML:

<div class="align">
    <ul>
        <li><img src="이미지"></li>
    </ul>
</div>

CSS:

    .align {
    display: inline-block;
    width: 125px;
    height: 130px;
    margin: 0 10px 0 10px;
    vertical-align: top;
}

위처럼 CSS를 적용했는데요 위의 이미지처럼 가운데 정렬이 되지 않고 줄바꿈 되면서 맨 오른쪽 공백이 생기고 맨 왼쪽 마진도 적용이 되질 않습니다.

아래 이미지처럼 이미지 엘리먼트들이 중앙정렬 되게 하려면 어떻게 CSS를 적용해야 할까요??

이미지


조회수 155


1 답변


좋아요
1
싫어요
채택취소하기

이미지를 div태그 안에서 더 자유롭게 정리하기위해서는 Flexbox 레이아웃을 활용하면 더 간편합니다.

<div class="align">
  <img src="http://www.imagebon.com/postpic/2014/08/black-and-white-shapes-clip-art_76554.png" alt="image"/>
</div>
.align {
    width: 800px;
    height: 360px;
    border: 1px solid #d0d0d0;

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}

여기 codepen 데모를 참고하세요.

flexbox layout을 더 자세하기 알고 싶다면 아래의 링크들을 참고하세요.

  1. CSS Flex 속성 http://webdir.tistory.com/349
  2. CSS 레이아웃을 배웁시다-Flexbox http://ko.learnlayout.com/flexbox.html
  • 2016년 08월 17일에 작성됨
    Css / visual design

로그인이 필요한 기능입니다.

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 작성한 답변에 다른 개발자들이 댓글을 작성하거나 좋아요/싫어요를 할 수 있기 때문에 계정을 필요로 합니다.
► 로그인
► 계정만들기
Close