如何将a中的行列网格居中 . HTML

Question

我正在构建一个显示图标网格的简单网络应用程序。我正在使网格部分显示和适当的大小，但我希望它在包含它的div类中居中。

我看到的中心内容的例子都涉及到margin: 0 auto;，但我似乎无法做到这一点并且行列设置正确显示所需的float: left; float: left似乎覆盖了我设定的任何边距。

这有什么解决方案吗？

这是HTML：

<div class="blobRegion">    
    <div class="b2_center_view">
        <div class="rows";>
            @foreach (var item in Model)
            {
                <div class="column">
                    <h3>@item.desc</h3>
                    <p>@item.chassis</p>
                </div>
            }
        </div>
    </div>   
</div>

这是column center_view和blobRegion的样式代码

.column {
    float: left;
    max-width: 200px;
    min-width: 180px;
    padding: 8px;
    border: 4px solid #001a00;
    background-color: #fffbf4;
}

.center_view {
    grid-column: 2 / 8;
    font-size: larger;
}

.blobRegion {
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 5px;
    grid-auto-rows: minmax(100px, auto);
}
    .blobRegion > div {
        border: 4px solid #001a00;
        border-radius: 5px;
        background-color: #fffbf4;
        padding: 10px;
        color: #4d0000;
        text-align: center;
        font-weight: bold;     
    }

这就是它的样子 -

1）窗口调整大小，水平扩展：

2）窗口进一步扩展（为另一列留出足够的空间）：

基本上我想要在右侧生长的白色空间，直到窗口展开时有足够的空间容纳另一列，在图标网格的两侧平均增长。因此，如果有意义的话，列将“浮动”在父级<div> b2_center_view的中间。

我知道如何在嵌套的div中居中静态数据或图像，但我无法使用此行列设置。

Answer 1

如果你希望你的列填充可用的位置，但要保持居中，这里是一个不错的技巧，不使用浮点数或网格，只是内联块。它更简单实用：

.rows {
  /* set text-align: center; to parent */
  text-align: center;
  
  /* your custom styling */
  background-color: whitesmoke;
  border: 1px solid silver;
}

.column {
  /*give column display: inline-block; and set parent (rows) to text-align: center;*/
  display: inline-block;
  
  /*your custom styling*/
  width: 200px;
  min-height: 180px;
  border: 2px solid white;
  margin: 5px;
  padding: 10px;
}

<div class="blobRegion">    
    <div class="b2_center_view">
        <div class="rows";>
        
                <div class="column">
                    <h3>Some Headline</h3>
                    <p>Paragraph goes here bla bla</p>
                </div>
                
                <div class="column">
                    <h3>Some Headline</h3>
                    <p>Paragraph goes here bla bla</p>
                </div>
                
                <div class="column">
                    <h3>Some Headline</h3>
                    <p>Paragraph goes here bla bla</p>
                </div>
                
                <div class="column">
                    <h3>Some Headline</h3>
                    <p>Paragraph goes here bla bla</p>
                </div>
                
                <div class="column">
                    <h3>Some Headline</h3>
                    <p>Paragraph goes here bla bla</p>
                </div>
                
                <div class="column">
                    <h3>Some Headline</h3>
                    <p>Paragraph goes here bla bla</p>
                </div>
                
                <div class="column">
                    <h3>Some Headline</h3>
                    <p>Paragraph goes here bla bla</p>
                </div>
                
                <div class="column">
                    <h3>Some Headline</h3>
                    <p>Paragraph goes here bla bla</p>
                </div>
                
                <div class="column">
                    <h3>Some Headline</h3>
                    <p>Paragraph goes here bla bla</p>
                </div>
                
                <div class="column">
                    <h3>Some Headline</h3>
                    <p>Paragraph goes here bla bla</p>
                </div>
                
        </div>
    </div>   
</div>

请参阅完整页面中的代码段并调整浏览器大小。