html - 文本如何在图片的边界之间居中

Question

我正在开发一种工具来帮助游戏。原始游戏看起来像这样:

我能够在左上角的紫色水滴上完成 Elixir 的编号。显示级别的透明标签。 (仍然需要根据卡片稀有度使用正确的颜色)。

但不能使标签在底部居中，并且如果可能的话看起来像在边框内而不是在整个图片上方。

我正在尝试关注这个问题 CSS center text (horizontally and vertically) inside a div block但无法使其发挥作用。

.elixir {
  position: absolute;
  top: 5px;
  left: 15px;
  color: white;
  font-weight: bold;
  font-size: 50px;
}

.level {
  color: white;
  font: bold 24px/45px Helvetica, Sans-Serif;
  letter-spacing: -1px;
  background: rgb(0, 0, 0);
  /* fallback color */
  background: rgba(0, 0, 0, 0.7);
  padding: 10px;
  text-align: center;
}

#header {
  position: relative;
  background: yellow;
  width: 200px;
}

#header-content {
  position: absolute;
  bottom: 0;
  color: Violet  ;
  font: bold 24px/45px Helvetica, Sans-Serif;
  letter-spacing: -1px;
  background: rgb(0, 0, 0);
  /* fallback color */
  background: rgba(0, 0, 0, 0.7);
  padding: 10px;
  /* width: 100%; */
  line-height: 40px;
}

<div id="header">
  <img src="https://vignette.wikia.nocookie.net/clashroyale/images/4/46/DarkPrinceCard.png/revision/latest?cb=20160702201038" />
  <span class="elixir"> 4 </span>
  <span id="header-content"> Level 2 </span>
</div>

Answer 1

您需要考虑一些事项。

集中这个元素

要解决您使用几种方法集中此元素的问题:

选项 1。

您可以将整个 span 宽度设置为 100% 并将文本居中，方法是将此添加到 #header-content:

width: 100%;
display: block;
text-align:center;

如下所示:https://codepen.io/anon/pen/RjmMjQ

选项 2。

您可以删除绝对定位，使用 display:inline-block，并在父元素上添加 text-align:center;，如下所示: https://codepen.io/anon/pen/wPbmrQ

选项 3。

如果元素是position:absolute;您还可以使用:

left: 50%;
transform: translateX(-50%);

相对于图像定位元素:

您还说过您希望将此元素定位在边框内。因为此边框是在图像本身上设置的，所以您需要定位元素，使其相对于图像。

为了确保所有内容都与填充正确对齐，我们需要设置以下内容，否则填充和 css 边框不包含在您设置的任何宽度中。:

*{
  box-sizing: border-box;
}

然后您需要获得准确的位置以将您的元素与图像对齐，这些似乎工作正常:

width: 170px;
bottom: 18px;
left:50%;
transform: translateX(-50%);
border-radius: 0 0 12px 12px;

这是为您完成的: https://codepen.io/anon/pen/YEbMYB