-1

I am trying to center the texts of a circle I made that covers the texts, codes as below:

.sticker {
    position: absolute;
    z-index: 5;
    width: 5em;
    height: 5em;
    background-color: yellow;
    border-radius: 100%;
    background-image: linear-gradient(135deg, #ffff00, #ffff00 15%, cyan);-image: linear-gradient(-45deg, #08f, #0f8);
    top: -13px;
}

.block__container {
    position: relative;
}
<span class='flash font--heading' ><br><b class = "sticker">+FREE shipping!</span></b><br>
YellowAfterlife
  • 2,967
  • 1
  • 16
  • 24
gina
  • 61
  • 1
  • 1
  • 9
  • For infos, `table-cell` works too if you want oldish browser to work too . `.sticker {display:table-cell;vertical-align:middle;text-align:center;}` – G-Cyrillus Aug 19 '19 at 15:40

2 Answers2

2

Use Flexbox, so change sticker css to:-

.sticker {
    display:flex;
    justify-content:center;
    width: 5em;
  align-items:center;
   text-align:center;
    height: 5em;
    background-color: yellow;
    border-radius: 100%;
    background-image: linear-gradient(135deg, #ffff00, #ffff00 15%, cyan);-image: linear-gradient(-45deg, #08f, #0f8);
}

And update HTML to:-

<span class='flash font--heading' ><br><b class = "sticker">+FREE shipping!</span></b><br>
Brad
  • 459
  • 2
  • 9
0

If it's just about centering this particular text you could just use flex-box. Example below.

But keep in mind that any additional text will overflow over the circle since you hardcoded height and width.

Also I modified your HTML a bit. I removed the <br> tags because you won't need them. The <b></b> Tag should be either inside or outside the <span> not inbetween since thats invalid HTML.

.sticker {
  position: absolute;
  display: flex;
  align-items: center;
  text-align: center;
  z-index: 5;
  width: 5em;
  height: 5em;
  background-color: yellow;
  border-radius: 100%;
  background-image: linear-gradient(135deg, #ffff00, #ffff00 15%, cyan);
  top: -13px;
}

.block__container {
  position: relative;
}
<span class='flash font--heading block__container'>
  <b class = "sticker">+FREE shipping!</b>
</span>
Alex-HM
  • 86
  • 3