How center the text between the limits of the picture

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>

joe · Accepted Answer · 2017-12-07T09:25:27.837

2

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

edited Dec 07 '17 at 09:25

answered Dec 06 '17 at 22:55

joe

405
4
11

Looks great.Did you try to add some round borders on the bottom with `border-radius` ?? Because still show some pointing corners on the bottom. Dont want to be picky but didnt thought about that until seeing your result. – Juan Carlos Oropeza Dec 06 '17 at 23:41
Looks like I didn't round the corners enough, looked fine last night but guess I was sleepy. `border-radius: 0 0 12px 12px;` rounds the borders enough to match the image. Updated my answer – joe Dec 07 '17 at 09:24
A followup question. On the first option why the Level text go wider than the picture? If you see my original try I also try to use 100% but in my case was much worst because took the width of the whole canvas instead of just the image. That is also the reason paint a yellow bg, so I could check the wide of things – Juan Carlos Oropeza Dec 07 '17 at 16:53
The span in option 1 is going wider than the picture because of the you have not set `box-sizing` on the element. The padding contributes additional width to the element. If you do not set `box-sizing: border-box;` on the element, the padding will not be included within the width. – joe Dec 08 '17 at 11:44

score 1 · Answer 2 · answered Dec 06 '17 at 23:02

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>

score 1 · Answer 3 · answered Dec 06 '17 at 23:02

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>

The round on the bottom is great. But you forget center the bottom text. But I will try to fix it with the other solutions. — Juan Carlos Oropeza, Dec 07 '17 at 00:02

G-Cyrillus · Answer 4 · 2017-12-06T23:15:24.873

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>

How center the text between the limits of the picture

4 Answers4