My attempt to center an image in the div didn't quite work out as planned. Here's the snippet of my html and css:
.col-xs-4 {
background-color: lightgrey;
width: 300px;
height: 200px;
border: 6px solid green;
padding: 25px;
margin: 25px;
cursor: pointer;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<a class="col-xs-4" *ngFor="let products of categoryProduc; let i = index" [routerLink]="[products.name]">
<h4 class="list-group-item-heading">{{ products.name }}</h4>
<p class="list-group-item-text">{{ products.description }}</p>
<img [src]="products.image" style=" left: 40%;
max-height: 100px; ">
</a>
</div>I'm now aiming to align h2 and p in the middle, one below the other.