div 안에 이미지 가로로 정렬되도록 어떻게 하나요?

헐크매니아

2016-11-28 (월) 22:00:39 14,501

div안에 버튼 이미지를 5개 넣었다고 가정했을때

삽입되는대로 먼저 불러와진 이미지 아래로 쌓이더군요.

가로로 일자로 되게 하려면 어떻게해야되나요?

참고로 div 디스플레이는 table-cell입니다.

div

채택된 답변

+20 포인트

그림자밟기

2016-11-28 (월) 22:05:08

img tag에 display:inline 속성을 주시거나, float:left 속성을 주시면 되겠습니다.

헐크매니아

2016-11-28 (월) 22:32:46

안되네요. 희한합니다.

sinbi

2016-11-28 (월) 23:13:58

버튼을 감싸는 div 너비를 충분히 넓히면 자연스레 가로로 나열될 것 같네요.

img나 button 등은 원래 인라인 속성이라 별도로 속성 줄 필요 없을 듯 싶습니다.

헐크매니아

2016-11-28 (월) 23:15:30

지금보니까 이게 문제였네요. 모든 이미지에 블록이 지정되니까 이런건데
이걸 안하면 이미지마다 아랫부분 5px정도 공백이 발생하는데 이걸 어떻게 없애나요?

img {
border: 0;
display: block;
}

sinbi

2016-11-28 (월) 23:17:45

바깥 div엔 padding:0 주고, img엔 margin:0 주면 될 것 같습니다.

헐크매니아

2016-11-28 (월) 23:22:32

vertical-align: bottom;
이걸로 해결했네요.

답변을 작성하려면 로그인이 필요합니다.