div的内容未与中心对齐

Question

我创建了一个包含两个部分的UI。左边的部分显示值的表，右边的部分显示饼图。我无法使饼形图的内容到达其div的中心。如您所见，左侧信息略有破绽。我暂时给divs加上了边框，以了解其布局。我尝试了几种方法，但没有用。

代码

<div class="form-group row">

  <div style="border:solid" class="panel panel-default col-md-12">

    <div style="border:solid;float: left; margin-top:0px ;height: 100%" *ngIf="AllocationDetails && AllocationDetails.MissingProducts"
      class="alert alert-danger col-md-5">
      <p><strong>The investments made in the following products are not included in this report:</strong></p>
      <table>
        <ng-container *ngFor="let group of AllocationDetails.MissingProducts">
          <tr>
            <th> {{group[0].ProductType}}</th>
          </tr>
          <tr *ngFor="let post of group">
            <td> {{ post.ProductName  }} </td>
          </tr>
          <tr>
            <td class="spacing"></td>
          </tr>
        </ng-container>
      </table>
    </div>

    <div style="border:solid;display:inline-block;" *ngIf="AllocationDetails && AllocationDetails.ChartData" class="col-md-7">
      <app-pie-chart style="margin-left:40px;"  [series]="allocation_series"></app-pie-chart>
    </div>
  </div>
</div>

Answer 1

您是否尝试过在

标签中添加 align =“ center”

示例

<div align="center"> content </div>

如果这不起作用，请尝试添加左边距：“ 20％”

<div margin-left:"20%"> content </div>

使用百分比可以根据显示尺寸缩放边距