将按钮居中放入响应卡中

Question

我试图将此按钮放在卡的中心，但被阻止了。

<div class="card "   >
<img src="/images-portfolio/img-test.jpg"   class="test" />
<button>button</button>
</div>

有人能给我一些建议吗？非常感谢。下面的解决方案对我来说不起作用

将响应卡图像内的图标或按钮居中

Answer 1

这就是您想要的？

.card {
display: flex;
justify-content: center;
align-items: center;
}

注意：如果你想给其他元素一个唯一的中心，你应该把它们单独包装起来。

.card {
display: flex;
justify-content: center;
align-items: center;
background: yellow;
height: 200px;
width: 300px;
}

<div class="card"   >
<button>button</button>
</div>

您可以根据需要更改值为url('/images-portfolio/img-test.jpg')的背景。