html - CSS Center Image and Text in a column

Question

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

问题

如何让图片和文字居中？

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

更新

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

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;
}

Answer 1

试试这个，

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

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