CSS Center Image and Text in a column

Question

我有以下内容。如您所见，图像和文本与列的左侧对齐。

题

如何让图片和文字居中？

我已经在列、文本和图像上尝试了 text-align: center; 。都没有效果。任何帮助表示赞赏。

更新

我正在使用 Ionic2 生成原始 html 代码：

网页格式

  <ion-row *ngFor="let trio of getTriples()">
    <ion-col *ngFor="let item of trio">
      <div style="text-align:center">
        <div class="row responsive-md">
          {{ formatCategories(item) }}
          <img (click)="toggleCategory(item)" class="item-stable-large filter-image" id="icon-image-{{item.id}}" src="{{item.icon}}"
            [class.item-selected]="itemShown === item" />
          <p class="filter-text">{{item.name}}</p>
        </div>
      </div>
    </ion-col>
  </ion-row>

CSS

 .filter-text {
    text-align: center;
}

.filter-image {
    text-align: center;
}

原文由 Richard 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

试试这个，

 img.filter-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

p.filter-text {
    margin-left: auto;
    margin-right: auto;
    width: 4em;
}

原文由 Kushan 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

尝试以下

它应该工作，我想。

 .col {
   align-self: center;
}

原文由 LKG 发布，翻译遵循 CC BY-SA 3.0 许可协议