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）窗口进一步扩展（为另一列留出足够的空间）：

基本上我想要那个在右侧生长的空白区域，直到窗口展开时有足够的空间容纳另一列，在图标网格的两侧平均增长。所以列将会＃＆＃34;浮动＆＃34;如果有意义的话，在父<div> b2_center_view的中间。

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

Answer 1

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

＆＃13;

const Discord = require("discord.js");
var fs = require('fs');
var data = fs.readFileSync('/home/discord/activity_bot/users.json', 'utf-8')
var arxeio = JSON.parse(data)
...
var kuklos = setInterval(function(done) {
        client.guilds.get('323921290543235073').channels.forEach(function(kanali, kanaliID) {
          if (kanali.type === 'voice' && !kanali.name.includes("AFK")) {
            kanali.members.forEach(function(melos, melosID) {
              let xristis = melos.user.username;
              if (arxeio[xristis]) {
                arxeio[xristis]++;
              } else {
                arxeio[xristis] = 1
              }
              fs.writeFile('/home/discord/activity_bot/users.json', JSON.stringify(arxeio, null, 2), 'utf-8', function(err) {
                  if (err) throw err
              })
            })
          }
        })
      }, 60*1000);

＆＃13;

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

＆＃13;

在整页中查看代码段并调整浏览器大小。

如何将<div>中的行列网格居中。 HTML

1 个答案: