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

Question

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

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

谢谢。这是我想要的示例。 https://i.stack.imgur.com/5xgEo.png

原文由 DudeManPerson 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您也可以这样尝试：

 * {
  boz-sizing: border-box;
}

body {
  font-family: sans-serif;
  background: #333;
  padding: 20px;
}

.button {
  background: #fff;
  border-radius: 6px;
  display: inline-block;
  padding: 10px;
  text-align: center;
  max-width: 150px;
  text-decoration: none;
}

.button figure {
  margin: 0 0 15px;
}

.button figure img {
  border-radius: 100%;
}

.button .text {
  font-weight: bold;
  text-transform: uppercase;
  color: #1d368a;
  margin: 0 0 15px;
  font-size: 16px;
}

 <a href="#" class="button">
  <figure><img src="http://via.placeholder.com/100x100"></figure>
  <div class="text">
    Start Playing Basketball
  </div>
</a>

原文由 vishnu 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

你可以使用 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%);
}

原文由 Avinash jain 发布，翻译遵循 CC BY-SA 4.0 许可协议