CSS中心圖像和文本在列

我有以下。正如您所看到的，圖像和文本與列的左側對齊。CSS中心圖像和文本在列

問題

如何中心的圖片和文字？

我已嘗試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; 
}

來源

2017-04-20 Richard

嵌入你的代碼，不顯示截圖，我們不能用它們做很多事情。 – Roberrrt

你知道圖像的寬度是多少？他們都一樣嗎？ –

我會在上面更新。然而，問題是我的代碼寫在離子框架，使原始的HTML代碼生成。 – Richard

試試這個，

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

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

來源

2017-04-20 11:19:12 Kushan

謝謝，那集中了它對我來說。我需要等10分鐘才能將此標記爲解決方案。感謝你的幫助。 – Richard

你可以嘗試做列position:relative;，然後用移動它們：

.filter-image { 
    position: absolute; 
    left: 0; 
    top: 0; 
}

與top和left手動移動。

來源

2017-04-20 11:19:15

請嘗試以下

它應該工作，我想。

.col { 
    align-self: center; 
}

來源

2017-04-20 11:21:53 LKG

CSS中心圖像和文本在列

回答

相關問題