css

CSS TIP! – <img> 요소 width값 모를 때 중간정렬 하는 팁

핑계/ editor

  • 0 comments
  • 1,082 views
  • 2017년 9월 2일

<img> 요소의 width값을 모를 때 중간정렬 하는법에 대해 알아보아요~

가로 중간정렬 할때 대표적인 방법으로 margin: 0 auto; 를 써주면 되죠??
그런데 저 방법을 쓸려면 꼭! width값을 적어줘야 하는데요~
width값을 적지 않으면 중간정렬이 되지 않잖아요…

그런데 <img>요소의 width값을 모를 때 중간정렬 하는 방법이 있더라구요~

지금부터 공유해볼께요 ~ 🙂

Markup

<body>
</body>

CSS

.box {
    width: 100%;
    height: 200px;
    padding: 20px 0;
    margin-top: 50px;
    border: 2px solid #ed5736;
}

.photo {
    margin: 0 auto;
}

HTML5AROUND on html5around.com

역시 <img> 요소에 width값이 없으니까 margin:0 auto; 를 써줘도 가로중간정렬이 되지 않네요.

 

 

방법은 아주 간단합니다.

원래 inline인 <img> 요소의 display 속성을 block으로 변경해주면 끝입니다.

<img> 요소의 display 속성을 block으로 변경 후 margin: 0 auto; 값을 써주면 모든 사이즈의 <img> 가 가로중간정렬이 됩니다.

추가 CSS

.box {
    width: 100%;
    height: 200px;
    padding: 20px 0;
    margin-top: 50px;
    border: 2px solid #ed5736;
}

.photo {
    margin: 0 auto;
    display: block;  /* 추가 css */
}

HTML5AROUND on html5around.com

해보니까 이 방법으로 다른 요소에 적용해도 똑같이 가로중간정렬이 되더라구요~
일일히 width값을 써주지 않아도 되니 편리하죠~
많이 사용해보세요~ 🙂

핑계

댓글 먹고 살아요~

Leave a Reply

avatar