如何在 div 中居中显示图像和按钮？ [复制]

Question

<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;">&nbsp;</span></span></strong><span style="font-size:18px;">&nbsp; &nbsp; &nbsp; &nbsp;</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;">&nbsp; &nbsp;&nbsp;</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;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</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>

我正在尝试将我的图像和按钮放在我的 div 中，并且可能还会缩短按钮的宽度。

Answer 1

将以下内容添加到图像的样式属性中： display:block; margin:auto

display:block 是必需的，因为默认情况下img 是一个内联元素。 通过设置margin:auto，图像的边距将自动调整为居中。