我想要对齐项目的内联或内联块，并在中心。

Question

​

​

我想用相同的金额设置左右边距。我想列出我的nft卡的格式，以下的图像，但他们不是居中。我只想用网格的方式展示它们。

<div className="a-nfts">
            <div className="a-nft-card">A</div>
            <div className="a-nft-card">A</div>
            <div className="a-nft-card">A</div>
            <div className="a-nft-card">A</div>
            <div className="a-nft-card">A</div>
            <div className="a-nft-card">A</div>
            <div className="a-nft-card">A</div>
            <div className="a-nft-card">A</div>
</div>
//css
.a-nft-card{  
  display: inline-block;
  height: 400px;
  width: 300px;
  background-color: #000309;
  border-radius: 10px;
  border: white 1px solid;
}
.a-nfts{  
  
  width: 60%; 
  border: 1px solid white;
  margin: auto; 
}

Answer 1

如果您将它们包装在一个flex容器中，并将其设置为flex: wrap content: center，那么这将使卡片居中。这就是你要找的吗？我把容器变成蓝色，这样你就可以看到效果了。

​

.container {
  background-color: lightblue;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.a-nft-card {
  display: inline-block;
  height: 400px;
  width: 300px;
  background-color: #000309;
  border-radius: 10px;
  border: white 1px solid;
  color:white;
}

.a-nfts {
  width: 60%;
  border: 1px solid white;
  margin: auto;
}

<div class="a-nfts">
  <div class='container'>
    <div class="a-nft-card">A</div>
    <div class="a-nft-card">A</div>
    <div class="a-nft-card">A</div>
    <div class="a-nft-card">A</div>
    <div class="a-nft-card">A</div>
    <div class="a-nft-card">A</div>
    <div class="a-nft-card">A</div>
    <div class="a-nft-card">A</div>
  </div>
</div>

​