Question

我有一个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

将<mat-form-field name="selectPolicy"> <mat-select placeholder="Change Policy" (selectionChange)="navigateTo($event.value)"> <mat-option *ngFor="let policy of policies" [value]="policy.policyNbr"> #{{policy.policyNbr}} </mat-option> </mat-select> </mat-form-field>添加到div中。原因是盒子模型。文本溢出了div，并占据了视口的整个宽度。通过不让div溢出来限制文本会阻止这种情况。

Answer 3

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

溢出：隐藏；

上方的div位置正确。

Answer 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);来调整列数。

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

4 个答案: