부트 스트랩으로 센터링 된 테이블 만들기

Question

20 개의 아이콘이 있으며 아이콘을 중심으로 한 수평 라인의 이미지를 만들고 싶습니다. 그러나 HTML 테이블을 사용할 수는 없기 때문에 응답 할 수 있습니다. 모바일 사용자를 위해 포장해야합니다. HTML 테이블을 사용하여 1 행 20 열을 사용해야하지만 작은 화면에서는 줄 바꿈되지 않습니다.

이렇게 div 그룹을 만들었습니다. 이것에 대한 견해는 괜찮습니다. http://jsfiddle.net/mayJ6/

<div style="display: inline-block; border: solid 1px black;"> 
    <a href="http://www.example.com" target="_blank" > 
     <img src="http://profile.ak.fbcdn.net/hprofile-ak-prn1/157940_262105851352_1630693163_q.jpg" 
      width="50" height="50" alt="photo"/> 
    </a> 
</div> 

는 그러나이 상황에서 디스플레이 인라인 블록을 사용하지 this answer 알려줍니다. 트위터 부트 스트랩 (Twitter Bootstrap) 등을 사용하면 비슷한 더 좋은 솔루션이 있습니까?

Answer 1

이 경우 display: inline-block은 완벽하게 괜찮다고 생각합니다.

2 개 또는 3 개의 열을 나란히 놓고 표시하려는 경우와 같이 기본 레이아웃에 대한 답변을 참조하십시오.이 경우 플로팅이 더 좋습니다.

플로트와 동일한 결과를 얻을 수 있지만 사진/아이콘을 컨테이너로 감싸고 고정 폭 또는 패딩을 설정해야합니다. 위의 예와 같이 너비를 백분율로 설정하면 더 작은 해상도로 포장됩니다. http://jsfiddle.net/E9pS9/