集中具有左对齐内容的 div [重复]

Question

我确信有一个简单的答案，但我就是想不通。我正在尝试提出以下布局：

红色框是一个 div，它应该动态增长以适应内容，并且应该位于页面的中心。它的宽度应该与它可以水平放置的黄色 div 的数量一样宽。黄色框是应该左对齐的 div。到目前为止，我已经尝试让红色 div 在设置为 text-align:center 的容器 div 中显示内联块，而黄色 div 设置为显示内联块。黄色 div 会随着浏览器大小的调整正确显示和流动，但红色 div 始终是浏览器宽度的 100%，因此网格不会集中在页面上。

这是我的 CSS：

<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：

<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

您需要 flexbox 在调整视口大小时灵活地对齐和包裹元素，我希望这能让您了解它的实现。

.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>