<div class="box" style=" width: 200px; height: 350px; border-radius: 15px 15px 15px 15px; background-color: rgb(217, 217, 217); display:flex; flex-direction: column; max-width: 25rem; min-width: 18rem; column; align-items: left; justify-content: left; margin: 5px; text-align: left; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: left;"><a href="https://dummyimage.com/350x300/000/fff" style="text-align: center; top: 25px;"><img font-family:lucida="" sans="" src="https://dummyimage.com/200x200/000/fff" style="width: 208px; height: 208px;" /><strong><span style="font-size:20px;"><span style="font-family:lucida sans unicode,lucida grande,sans-serif;"> </span></span></strong><span style="font-size:18px;"> </span></a><a href="https://dummyimage.com/350x300/000/fff" style="text-align: center; top: 25px;"><span style="font-size: 18px;"><b>T-Shirts</b></span></a><a href="https://dummyimage.com/350x300/000/fff" style="text-align: center; top: 25px;"><span style="font-size:18px;"> </span></a><a href="https://dummyimage.com/350x300/000/fff" style="text-align: center;"><span style="font-size:18px;"></span></a><a href="https://dummyimage.com/350x300/000/fff" style="text-align: left; font-size: 0.875rem; display: inline !important;"><span style="font-size:18px;"> </span></a><a href="https://dummyimage.com/350x300/000/fff"><span style="font-size:16px;"></span></a><a class="btn btn-info btn-sm edatalayer order-1" data-list="product-listing-page" data-position="1" data-purl="banners-gloss" href="http://www.example.com/border.php">View details <i class="far fa-chevron-right pl-1"></i></a></div>
I'm trying to center my image and button within my div, and possibly shorten the width of the button as well.
