如何在 div 中垂直居中多个内联块 div？

Question

I see this.

我有一个 div 里面有 20 个内联块 div。
我以 "text-align:center".
为中心 javascript 代码将一些文本写入第一个 div。
第一个div高于其他
如何在不发生这种情况的情况下将 div 居中？

.teszt
{
  border:1px solid rgba(255,0,0,0.5);
  width:200px;
  min-height:100px;
  margin:20px;
  display:inline-block;
  border-radius:5px;
  box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
  background:rgba(50,0,0,0.5);
  color:white;
}

<div style="text-align:center">
  <div class="teszt" id="testmcserverinfo">Here's a text generated by javascript</div>
  <div class="teszt">Teszt2</div>
  <div class="teszt">Teszt3</div>
  <div class="teszt">Teszt4</div>
  <div class="teszt">Teszt5</div>
  <div class="teszt">Teszt6</div>
  <div class="teszt">Teszt7</div>
  <div class="teszt">Teszt8</div>
  <div class="teszt">Teszt9</div>
  <div class="teszt">Teszt10</div>
  <div class="teszt">Teszt11</div>
  <div class="teszt">Teszt12</div>
  <div class="teszt">Teszt13</div>
  <div class="teszt">Teszt14</div>
  <div class="teszt">Teszt15</div>
  <div class="teszt">Teszt16</div>
  <div class="teszt">Teszt17</div>
  <div class="teszt">Teszt18</div>
  <div class="teszt">Teszt19</div>
  <div class="teszt">Teszt20</div>
</div>

（抱歉我的英语不好）

Answer 1

为您的元素添加 vertical-align 值。

.teszt {
  vertical-align: top; // or middle
}

Answer 2

将 overflow:auto; 添加到 div。这样做的原因是盒子模型。文本溢出 div 并占据视口的整个宽度。通过不让它溢出来限制文本 div 停止。

Answer 3

我认为下面的看起来更清晰，它使用了 css grid.

.teszt
{
  border:1px solid rgba(255,0,0,0.5);
  min-height:100px;
  border-radius:5px;
  box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
  background:rgba(50,0,0,0.5);
  color:white;
}

.row {
  text-align: center;
  display: grid;
  grid-template-columns: repeat(5, 200px);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}

<div class="row">
  <div class="teszt" id="testmcserverinfo">Here's a text generated by javascript</div>
  <div class="teszt">Teszt2</div>
  <div class="teszt">Teszt3</div>
  <div class="teszt">Teszt4</div>
  <div class="teszt">Teszt5</div>
  <div class="teszt">Teszt6</div>
  <div class="teszt">Teszt7</div>
  <div class="teszt">Teszt8</div>
  <div class="teszt">Teszt9</div>
  <div class="teszt">Teszt10</div>
  <div class="teszt">Teszt11</div>
  <div class="teszt">Teszt12</div>
  <div class="teszt">Teszt13</div>
  <div class="teszt">Teszt14</div>
  <div class="teszt">Teszt15</div>
  <div class="teszt">Teszt16</div>
  <div class="teszt">Teszt17</div>
  <div class="teszt">Teszt18</div>
  <div class="teszt">Teszt19</div>
  <div class="teszt">Teszt20</div>
</div>

您可以使用 grid-template-columns: repeat(5, 200px); 调整列数。

Answer 4

只需在 class 中添加一行即可。

溢出：隐藏；

div往上走就到位了

如何在 div 中垂直居中多个内联块 div？

How can I vertically center multiple inline-block divs in a div?

html

css

position

center