如何在一个 div 中垂直居中多个 inline-block div？ [复制]答案

【问题标题】：How can I vertically center multiple inline-block divs in a div? [duplicate]如何在一个 div 中垂直居中多个 inline-block div？ [复制]
【发布时间】：2019-03-27 01:21:47
【问题描述】：

I see this.

我有一个包含 20 个内联块 div 的 div。
我以“text-align:center”为中心。
一段 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>

（对不起我的英语不好）

【问题讨论】：

标签： html css position center

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

不确定您在说 文本溢出 div 并占据视口的整个宽度时指的是什么溢出？添加 overflow: hidden; 只会将 inline-block 元素的基线更改为元素的底部，因此它们都将正确对齐
@TemaniAfif 我没说要加overflow:hidden;
是的，对不起，我的意思是overflow:auto（两者的行为相同，应该只是与可见不同）
它会起作用，因为溢出也会通过调整基线来解决问题
默认情况下每个块级元素都是自动的，那么写它有什么意义呢？可能有一些 Web 浏览器默认没有溢出：自动，但大多数都有。

【解决方案3】：

只需在您的课程中添加一行即可。

溢出：隐藏；

上面的那个div会来到正确的位置。

【讨论】：

【解决方案4】：

我认为以下看起来更干净，它使用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); 来调整列数。

【讨论】：