왼쪽 맞춤 콘텐츠로 div를 중앙 집중화합니다.

Question

쉽게 대답 할 수있을 것으로 확신하지만, 아직 이해할 수 없습니다. 나는 다음과 같은 레이아웃을 마련하기 위해 노력하고있어 :

빨간색 상자가 동적으로 내용에 맞게 성장해야하고, 페이지를 중심으로해야한다 사업부입니다. 수평으로 맞출 수있는 노란색 div 수만큼 넓어 야합니다. 노란색 상자는 왼쪽 정렬되어야하는 div입니다. 지금까지 나는 빨간색 div가 텍스트 div : center로 설정된 컨테이너 div 내에 인라인 블록으로 표시되도록하고 노란색 div는 인라인 블록을 표시하도록 설정하려고 시도했습니다. 노란색 div는 올바르게 표시되고 브라우저의 크기가 조정됨에 따라 흐르지 만 빨간색 div는 항상 브라우저 폭의 100 %이므로 그리드가 페이지 중앙에 집중되지 않습니다.

<style> 

    .bar { 
     height:50px; 
     font-weight:300; 
     text-align:right; 
    } 

    .bluebackground { 
     background-color:#00A9A3; 
    } 

    .barcontent { 
     margin-right:10px; 
     color:white; 
    } 

    .verticalalign { 
     display:inline-block; 
     vertical-align:middle; 
    } 

    .DivHelper { 
     display: inline-block; 
     vertical-align: middle; 
     height:100%; 
    } 

    .normalfont { 
     font-family: 'Open Sans Light', sans-serif; 
    } 

    .bigtext { 
     font-size:20px; 
    } 

    .medium { 
     font-size:15px; 
    } 

    .blockp { 
     display:inline-block; 
    } 

    .darktext { 
     color:#333; 
    } 

    body { 
     height:100%; 
     margin:0; 
     padding:0; 
     background-color:#F6F6F6; 
    } 

    html, body, #body2 { 
     height: 100%; 
     min-height: 100%; 
    } 

    table td:last-child { 
     width: 100%; 
    } 

    .menulinkcontainer { 
     display:inline-block; 
     vertical-align:top; 
     padding:20px; 
     margin-bottom:20px; 
     background-color:green; 
    } 

    .menulinkbackdrop { 
     display:inline-block; 
     min-width:250px; 
     width:250px; 
     height:200px; 
     min-height:200px; 
     cursor:pointer; 
    } 

    .menulinkshader { 
     position:relative; 
     top:-200px; 
     left:0px; 
     width:100%; 
     min-width:100% 
     height:100%; 
     min-height:100%; 
     background-color:rgba(0,0,0,0.0); 
    } 

    .menulinktext { 
     display:inline-block; 
     min-width:250px; 
     max-width:250px; 
     width:250px; 

    } 

    .menucontainer { 
     padding:20px; 
     background-color:red; 
     display:inline-block; 
     clear:both; 
     float:left; 
    } 

</style> 

그리고 HTML : 여기

내 CSS의 뷰포트의 크기를 조정할 나는 희망대로 유연하게 정렬 및 요소를 래핑 인 flexbox 필요

<div class='menucontainer'> 
     <div class='menulinkcontainer'> 
      <div class='menulinkbackdrop' style='background-color:#777' align='center'> 
       <img src='img/reviews.png' class='verticalalign'><div class='DivHelper'></div> 
       <div class='menulinkshader' onMouseOver='this.style.backgroundColor="rgba(0,0,0,0.25)"' onMouseOut='this.style.backgroundColor="rgba(0,0,0,0.0)"'></div> 
      </div><br> 
      <div class='menulinktext normalfont bigtext' style='color:#777' align='center'> 
       REVIEWS 
      </div><br> 
      <div class='menulinktext normalfont mediumtext' style='margin-top:10px' align='left'> 
       Reviews link. 
      </div> 
     </div> 

     <div class='menulinkcontainer'> 
      <div class='menulinkbackdrop' style='background-color:#f33' align='center'> 
       <img src='img/reviews.png' class='verticalalign'><div class='DivHelper'></div> 
       <div class='menulinkshader' onMouseOver='this.style.backgroundColor="rgba(0,0,0,0.25)"' onMouseOut='this.style.backgroundColor="rgba(0,0,0,0.0)"'></div> 
      </div><br> 
      <div class='menulinktext normalfont bigtext' style='color:#f33' align='center'> 
       COMING SOON 
      </div><br> 
      <div class='menulinktext normalfont mediumtext' style='margin-top:10px' align='left'> 
       Coming soon link. 
      </div> 
     </div> 

     <div class='menulinkcontainer'> 
      <div class='menulinkbackdrop' style='background-color:#3f3' align='center'> 
       <img src='img/reviews.png' class='verticalalign'><div class='DivHelper'></div> 
       <div class='menulinkshader' onMouseOver='this.style.backgroundColor="rgba(0,0,0,0.25)"' onMouseOut='this.style.backgroundColor="rgba(0,0,0,0.0)"'></div> 
      </div><br> 
      <div class='menulinktext normalfont bigtext' style='color:#3f3' align='center'> 
       DEALS 
      </div><br> 
      <div class='menulinktext normalfont mediumtext' style='margin-top:10px' align='left'> 
       Deals link. 
      </div> 
     </div> 

     <div class='menulinkcontainer'> 
      <div class='menulinkbackdrop' style='background-color:#3f3' align='center'> 
       <img src='img/reviews.png' class='verticalalign'><div class='DivHelper'></div> 
       <div class='menulinkshader' onMouseOver='this.style.backgroundColor="rgba(0,0,0,0.25)"' onMouseOut='this.style.backgroundColor="rgba(0,0,0,0.0)"'></div> 
      </div><br> 
      <div class='menulinktext normalfont bigtext' style='color:#3f3' align='center'> 
       AWARDS 
      </div><br> 
      <div class='menulinktext normalfont mediumtext' style='margin-top:10px' align='left'> 
       Awards link. 
      </div> 
     </div> 

    </div> 

Answer 1

이 당신의 아이디어를 제공합니다 그 구현.

.things { 
 
    padding: 0; 
 
    margin: 0; 
 
    flex-flow:row wrap; /*Wraps down in row fashion*/ 
 
    display: flex; /* Display property on parent container*/ 
 
    background:red; 
 
} 
 

 
.thing { 
 
    background:yellow; 
 
    border:1px solid black; 
 
    padding: 10px; 
 
    margin:5px; 
 
    flex:1 0 200px; /* 1 is for flex-grow, 0 for flex-shrink and the basis width is set to 200px */ 
 
    max-width:250px; 
 
    height:200px; 
 
    align-items:center; 
 
}

<div class="things"> 
 
    <div class="thing"></div> 
 
    <div class="thing"></div> 
 
    <div class="thing"></div> 
 
    <div class="thing"></div> 
 
    <div class="thing"></div> 
 
</div>