html - 如何创建带有图像和文本的按钮

Question

我正在制作一个篮球网站，我需要为指向不同页面的链接制作一些自定义图标/按钮。我想创建一个自定义按钮，它有一个带有下面图片的圆形图片。在它下面，我需要文字。

我不知道如何在同一个图标中获取文本和图像。

谢谢。这是我想要的示例。 /image/5xgEo.png

Answer 1

你可以使用 HTML 和 CSS 来做到这一点

<div class="container">
<img src="example.jpg" alt="img miss">
<div class="centered">Centered</div>
</div>

<style>
.container {
position: relative;
text-align: center;
color: white;
}

.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}