0

I am developing an angular project and I have items as components to be displayed.But there is an issue ,while displaying the content. This is the component code.

<a href="" class="list-group-item clearfix" >
<div class="container-fluid">
<div class="pull-left">
    <h4 class="list-group-item-heading">
           {{rec.name}}
    </h4>
    <p class="list=group-item-text" >{{rec.description}}</p>
  </div>

<div class="center">
    <img src="{{rec.ImagePath}}">
</div>
</div>
</a>

Whereas this is the app.component(the main file)code

<app-header (featureselected)="onNavigate($event)"></app-header>
 <div class="container"><div class="row">
<div class="col-md-12">

<app-recipes *ngIf="LoadedFeature ==='recipe' ;else shop"></app-recipes>
  <ng-template #shop >
    <app-shopping-list></app-shopping-list>
  </ng-template>
   </div>
 </div>
</div>

The output looks like this output

I am expecting the image of the item to be displayed below my content paragraph i.e description. Can someone help?

Aditi
  • 53
  • 8
  • 1
    Perhaps you could try to change the 'center' class on the div around the img to use the 'text-center' class, supplied with bootstrap4 for inline elements such as imgs. – Zain Syed Jun 29 '20 at 17:14

1 Answers1

0

Use "mx-auto" instead of "center" and specify a width. This should align the image in the center of the block.

<div class="mx-auto" style="width: 50px;">
    <img src="{{rec.ImagePath}}">
</div>
Dexter Mandark
  • 131
  • 2
  • 7