This question already has answers here:
Make container shrink-to-fit child elements as they wrap
                                
                                    (4个答案)
                                
                        
                        
                            Center align container and left align child elements
                                
                                    (9个答案)
                                
                        
                        
                            How to center a flex container but left-align flex items
                                
                                    (3个答案)
                                
                        
                                2年前关闭。
            
                    
我敢肯定有一个简单的答案,但我只是想不通。我正在尝试提出以下布局:

html - 用左对齐内容集中div-LMLPHP

红色框是一个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>

最佳答案

在调整视口大小时,您需要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>

10-05 20:57
查看更多