How center the text between the limits of the picture - html

Question

I'm doing a tool to help in a game. The original game looks like this:
I was able to do the elixir number on the purple drop on the top-left. The transparent label to show the Level. (still need to work with the right colors based in card rarity).
But cant make the label center on the bottom and if possible looks like inside the border instead of above the whole picture.
I was trying following this question CSS center text (horizontally and vertically) inside a div block but haven't be able to make it work.
.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

There are a few things you need to take into consideration.
Centralising this element
To address your issue of centralising this element with a couple of methods:
Option 1.
You can make the entire span width 100% and center the text within it by adding this to #header-content:
width: 100%;
display: block;
text-align:center;
As shown here: https://codepen.io/anon/pen/RjmMjQ
Option 2.
You can remove the absolute positioning, use display:inline-block, and, adding text-align:center; on the parent element like so:
https://codepen.io/anon/pen/wPbmrQ
Option 3.
If the element is position:absolute; you can also use:
left: 50%;
transform: translateX(-50%);
Positioning the element relative to an image:
You also said you would like this element to be positioned inside the border. Because this border is set on the image itself, you will need to position your element so it is relative to the image.
To make sure everything lines up correctly with padding we need to set the following, otherwise padding & css borders are not included in any width you set.:
*{
box-sizing: border-box;
}
Then you need to get the exact position right for aligning you element with the image, these seem to work right:
width: 170px;
bottom: 18px;
left:50%;
transform: translateX(-50%);
border-radius: 0 0 12px 12px;
This is done for you here:
https://codepen.io/anon/pen/YEbMYB

Answer 2

First you need to make the image max-width:100% to avoid overflow, then simply adjust left/right/bottom values since your element is absolute position and add text-align:center :
.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 img {
max-width:100%;
}
#header-content {
position: absolute;
bottom: 5px;
left:5px;
right:5px;
text-align:center;
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 3

By using left:0; right:0; and appropirate margin value, you should be able to center it. You could also set the width of the #header-content and set margin:0 auto;, it would achieve the same effect.
I also fit the image inside parent and added a curve to the label, you can see everything commented in css.
Working snippet:
.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 img {width:100%; /* sets image to fit parent */}
#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;
right:0; left:0; /*center*/
margin:0 18px 24px 18px; /* set margin to appropriate values top right bottom left*/
border-bottom-left-radius:13px; border-bottom-right-radius:13px; /* curved edges */
}
<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 4

Not too sure, but looks like you are just missing coordonates and text-align.
update example for #header-content:
bottom: 30px;
left:24px;
right:24px;
text-align:center;
and eventually
border-radius:0 0 10px 10px;
text-shadow:1px 1px white;
Demo below:
.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(218, 21, 225);
padding: 10px;
text-align: center;
}
#header {
position: relative;
background: yellow;
width: 200px;
}
#header-content {
position: absolute;
bottom: 30px;
left:24px;
right:24px;
text-align:center;
border-radius:0 0 10px 10px;
text-shadow:2px 2px black, -1px -1px black;;
color: Violet ;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0);
/* fallback color */
background: rgba(218, 21, 225,0.5);
/* 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>