float : left div를 가운데에 정렬?

이미지 그룹을 페이지에 가로로 표시하고 싶습니다. 각 이미지 아래에는 몇 개의 링크가 있으므로 각 이미지 / 링크 그룹 주위에 컨테이너를 배치해야합니다.

내가 원하는 것에 가장 가까운 것은 float : left 인 div에 넣는 것입니다. 문제는 컨테이너가 왼쪽이 아닌 가운데 정렬되기를 원한다는 것입니다. 이것을 어떻게 할 수 있습니까?

display:inline-block;float 대신 사용

수레를 가운데에 놓을 수는 없지만 인라인 블록은 마치 텍스트 인 것처럼 가운데에 배치되므로 "행"의 외부 전체 컨테이너에 text-align: center;다음을 설정할 수 있습니다. 그러면 각 이미지 / 캡션 컨테이너에 대해 inline-block;다시 설정할 수 있습니다. -필요한 경우 텍스트를 왼쪽으로 정렬

CSS Flexbox는 요즘 잘 지원 됩니다. flexbox에 대한 좋은 자습서를 보려면 여기 로 이동하십시오 .

이것은 모든 최신 브라우저에서 잘 작동합니다.

#container {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
}

.block {
  width:              150px;
  height:             150px;
  background-color:   #cccccc;
  margin:             10px;        
}

<div id="container">
  <div class="block">1</div>    
  <div class="block">2</div>    
  <div class="block">3</div>    
  <div class="block">4</div>    
  <div class="block">5</div>        
</div>

어떤 사람들은 display : inline-block을 사용하지 않는 이유를 묻습니다. 간단한 일의 경우 괜찮지 만 블록 내에 복잡한 코드가 있으면 레이아웃이 더 이상 올바르게 중앙에 배치되지 않을 수 있습니다. Flexbox는 부동 왼쪽보다 안정적입니다.

다음과 같이 시도하십시오.

  <div id="divContainer">
    <div class="divImageHolder">
    IMG HERE
    </div>
    <div class="divImageHolder">
    IMG HERE
    </div>
    <div class="divImageHolder">
    IMG HERE
    </div>
    <br class="clear" />
    </div>

    <style type="text/css">
    #divContainer { margin: 0 auto; width: 800px; }
    .divImageHolder { float:left; }
    .clear { clear:both; }
    </style>

플로팅 요소를 a에 감싸고 <div>다음 CSS를 제공하십시오.

.wrapper {

display: table;
margin: auto;

}

아마도 이것이 당신이 찾고있는 것입니다-https: //www.w3schools.com/css/css3_flexbox.asp

CSS :

#container {
  display:                 flex;
  flex-wrap:               wrap;
  justify-content:         center;
}

.block {
  width:              150px;
  height:             150px;
  margin:             10px;        
}

HTML :

<div id="container">
  <div class="block">1</div>    
  <div class="block">2</div>    
  <div class="block">3</div>          
</div>

.contentWrapper {
    float: left;
    clear: both;
    margin-left: 10%;
    margin-right: 10%;
}

.repeater {
    height: 9em;
    width: 9em;
    float: left;
    margin: 0.2em;
    position: relative;
    text-align: center;
    cursor: pointer;
}