Question

我已经用了两小时的时间,但找不到解决办法。

我有两部<条码>。我的<代码>ul集装箱中的单项物品

 <ul id="button-cash">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
          
</ul>

#button-cash {
  display: grid;
  grid-template-columns: 60px 60px 60px 60px;
  grid-auto-rows: 10vh;
  align-items: center;
  justify-items: center;
  list-style-type: none;
  width: 100%;
  height: 300px;
  
}

li {
 width: 35px;
 height: 30px;
 background-color: rgb(65, 171, 185);
}

#price-screen, #button-cash, #cash-in-drawer {
   background-color: rgb(159, 227, 236);
}

我希望这一图表集中,以便试图在我的电网箱中添加这些特性。

  align-items: center;
  justify-items: center;

but instead i got this result sample

一览表略低于我集装箱的边缘

So I thought it would be smarter to make my grid container position: relative;

我在图表中增加了以下各点:

position: absolute;
top: 50%;
bottom: 50%;
transform(50%, -50%);

it worked but i got this result instead sample all the li fused into one single element while they were centralized

我认为,这一解决办法非常简单,但无法查明其是什么。

Answer 1

我补充说了一个有理的争论点:使中心成为中心而不是正当的项目。让我知道,这是否意味着什么?

#button-cash {
  display: grid;
  grid-template-columns: 60px 60px 60px 60px;
  align-items: center;
  justify-content: center;
  list-style-type: none;
  width: 100%;
  height: 300px;
  
  
}

li {
 width: 35px;
 height: 30px;
 background-color: rgb(65, 171, 185);
}

#price-screen, #button-cash, #cash-in-drawer {
   background-color: rgb(159, 227, 236);
}

<ul id="button-cash">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
          
</ul>

友情链接