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中心图像和文本在列

回答

相关问题