html - 如何在一个 div 中垂直居中多个 inline-block div？

Question

我看到了这个。

我有一个包含 20 个内联块 div 的 div。
我以“文本对齐：中心”为中心。
javascript 代码将一些文本写入第一个 div。
第一个 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>

（对不起，我的英语不好）

标签： htmlcsspositioncenter

Answer 1

为您的元素添加一个垂直对齐值。

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