왼쪽으로 떠있는 요소를 가운데에 배치하는 방법은 무엇입니까?

Question

나는 다양한 너비의 용기를 가지고 있으며 상자 안에 여러 개의 상자가 뜬다. 모든 상자는 width과 height입니다.

이것은 데모입니다. https://jsfiddle.net/kghvmjb6/1/

가능한 경우 순수 CSS 솔루션을 찾고 있습니다. 그렇지 않으면 순수한 자바 스크립트 (no jQuery)와 CSS 솔루션이 좋습니다.

이 예제는 한 줄의 부동 상자에서 제대로 작동하지만 여러 줄로 실패합니다. 원하지 않습니다. https://codepen.io/alexandredees/pen/ojaFr

Answer 1

대신 floatleft를 사용하는 displayinline-block을 사용하고 부모에 div는 container

Modified Fiddle

HTML

<div class="container"> 
<div class=""> 
    <div class="box">1</div> 
    <div class="box">2</div> 
    <div class="box">3</div> 
    <div class="box">4</div> 
    <div class="box">5</div> 
    <div class="box">6</div> 
    <div class="clear"></div> 
</div> 
</div> 

CSS의 박스 중앙 것, text-aligncenter를 추가

.container { 
    border: 1px solid red; 
    width: 480px; text-align:center; 
} 

    .container.wider { 
    width: 530px; 
    } 

.box { 
    float: none; 
    width: 80px; 
    height: 80px; 
    margin: 10px; 
    background-color: #ddd; 
    display:inline-block; 
    }