Question

我正在努力使团队成员和兴趣集中，同时使文本也集中。我不希望2列占据整个屏幕，而且在包装时也遇到了麻烦。我希望2列位于中间，因此，例如：左边25％填充，右边25％填充，然后每列中间50％。

谢谢您的答复，我真的很努力。

.centerObjects {
  float: left;
  padding-left: 11%;
  margin-left: auto;
  margin-right: auto;
}

.card {
  flex-grow: 2;
}

.wrapThatShit {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
}

<div class="d-flex justify-content-center wrapThatShit w-100">
    <div class="p-2 card w-25">
      <div class="card-body">
        <h5 class="card-title" style="text-align: center;">
          Interests
        </h5>
        <div *ngFor="let item of interests">
          <div class="centerObjects">
            <ng-container *ngIf="item === 'Music'">
              <mat-icon aria-hidden="false"> music_note </mat-icon>

              {{ item }}
            </ng-container>
            <ng-container *ngIf="item === 'Technology'">
              <mat-icon aria-hidden="false"> desktop_mac</mat-icon>
              {{ item }}
            </ng-container>
            <ng-container *ngIf="item === 'Sports'">
              <mat-icon aria-hidden="false"> sports_football</mat-icon>
              {{ item }}
            </ng-container>
            <ng-container *ngIf="item === 'Art'">
              <mat-icon aria-hidden="false"> create </mat-icon>

              {{ item }}
            </ng-container>
            <ng-container *ngIf="item === 'Fashion'">
              <mat-icon aria-hidden="false"> checkroom </mat-icon>

              {{ item }}
            </ng-container>
            <ng-container *ngIf="item === 'Gaming'">
              <mat-icon aria-hidden="false"> sports_esports </mat-icon>

              {{ item }}
            </ng-container>
            <ng-container *ngIf="item === 'Education'">
              <mat-icon aria-hidden="false"> menu_book</mat-icon>

              {{ item }}
            </ng-container>
            <ng-container *ngIf="item === 'Business'">
              <mat-icon aria-hidden="false"> business</mat-icon>

              {{ item }}
            </ng-container>
            <span> </span>
          </div>
        </div>
      </div>
    </div>
    <div class="p-2 card w-45">
      <div class="card-body">
        <div class="card-title">
          Team Members
          <hr />
        </div>
        ( image ) Person 1 <br />
        ( image ) Person 2 <br />
        ( image ) Person 3
      </div>
    </div>
  </div>

Answer 1

在您的代码中

固定使用card-title和card-body
在侧面增加了25％的填充
添加了align-items: center;用于垂直居中
添加了justify-content: center;用于水平居中

希望下面的代码段有帮助...

.card {
  flex-grow: 2;
}

.card {
  border: 1px solid green;
}

.card-body {
  border: 1px solid red;
  padding: 0 25%;
  display: flex;
  align-items: center;
  justify-content: center;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<div class="d-flex justify-content-center wrapThatShit w-100">
  <div class="p-2 card w-25">
    <h5 class="card-title" style="text-align: center;">
      Interests
    </h5>
    <div class="card-body">
      <div *ngFor="let item of interests">
        <div class="centerObjects">
          <ng-container *ngIf="item === 'Music'">
            <mat-icon aria-hidden="false"> music_note </mat-icon>

            {{ item }}
          </ng-container>
          <ng-container *ngIf="item === 'Technology'">
            <mat-icon aria-hidden="false"> desktop_mac</mat-icon>
            {{ item }}
          </ng-container>
          <ng-container *ngIf="item === 'Sports'">
            <mat-icon aria-hidden="false"> sports_football</mat-icon>
            {{ item }}
          </ng-container>
          <ng-container *ngIf="item === 'Art'">
            <mat-icon aria-hidden="false"> create </mat-icon>

            {{ item }}
          </ng-container>
          <ng-container *ngIf="item === 'Fashion'">
            <mat-icon aria-hidden="false"> checkroom </mat-icon>

            {{ item }}
          </ng-container>
          <ng-container *ngIf="item === 'Gaming'">
            <mat-icon aria-hidden="false"> sports_esports </mat-icon>

            {{ item }}
          </ng-container>
          <ng-container *ngIf="item === 'Education'">
            <mat-icon aria-hidden="false"> menu_book</mat-icon>

            {{ item }}
          </ng-container>
          <ng-container *ngIf="item === 'Business'">
            <mat-icon aria-hidden="false"> business</mat-icon>

            {{ item }}
          </ng-container>
          <span> </span>
        </div>
      </div>
    </div>
  </div>
  <div class="p-2 card w-45">
    <h5 class="card-title" style="text-align: center;">
      Team Members
    </h5>
    <div class="card-body">
      ( image ) Person 1 <br /> ( image ) Person 2 <br /> ( image ) Person 3
    </div>
  </div>
</div>

Flexbox和Bootstrap-列无法按预期运行

1 个答案: