列中的CSS中心图像和文本

Question

我有以下内容.如您所见,图像和文本对齐到列的左侧.

题

如何使图像和文本居中？

我试过text-align: center;了专栏,文字和图片.一切都没有效果.任何帮助赞赏.

UPDATE

我正在使用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;
}