the text is decentered in the circular button with the increase of the font size

Question

I need to build a circular button... and I've already seen many answers... and yes... they all work... but the button I need has inside an angular material icon that occupies the entire space of the circle... so when I use these solutions and increase the size of the icon then it becomes unfit.

For example... using the same solution shown in centering-text adapted to what I need this is the code I use:

.btn-circle {
    border: 10px solid white;
    background-color: #444;
    /*background: #97c83e;*/
    width: 72px;
    height: 72px;
    border-radius: 100%;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bold;
    text-decoration: none;

    /*
    text-orientation:sideways;
    writing-mode: vertical-lr;
    */
    
    text-align: center;
    font-size: 55px;
    /*
    font-size: 35px;
    */
}

<a href="" class="btn-circle">
   &lsaquo;&lsaquo;
</a>

In this case with the font size set to 35px everything looks fine.

The button I need to build would be exactly one like this:

I have also used the method of the div with display table and another div inside with display table-cell as in align-text-vertically and the same thing happens to me.

The problem is that your text content here is not centered in the box it creates to begin with. Select all the content in your snippet example above, and you will see what I mean. The characters `‹‹` are not sitting in the middle of the line box, they sit towards the bottom. You can fiddle with the `line-height` to try and account for that. And the box is also _wider_, than given width allows for. — CBroe, Feb 22 '22 at 12:20

DreamTeK · Accepted Answer · 2022-02-22T13:16:53.347

What you need to be aware of is that the vector object, in this case &lsaquo; has been saved with additional alpha space above and below it. This is done because it is part of a font set and needs to align correctly with other font characters.

See this example of how the vectors have included space. Only the S will be centralised.

EXAMPLE

div {
  font-size: 55px;
  background:#ccc;
}

<div>Ss&lsaquo;y</div>

MANUAL OFFSET

Use `line-height`, `margin`, `padding` or absolute positioning to manually offset font position after centering.

Also note align-items controls children. align-content controls self.

.btn-circle {
    background-color: #444;
    width: 72px;
    height: 72px;
    border-radius: 100%;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-content: center;
    color: white;
    font-weight: bold;
    font-size: 55px;
    line-height:60px;
}

<a href="" class="btn-circle">
   &lsaquo;&lsaquo;
</a>

UNICODE ALTERNATIVE

You will get the best control by setting the flex content to a control that can be targeted like a span tag. this way you can directly manipulate the object. In this case setting it to fill its container.

This unicode example is not ideal as it has some alpha space. You can find others here - https://unicode-table.com/

.btn-circle {
  background-color: #444;
  width: 72px;
  height: 72px;
  border-radius: 100%;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-circle span {
  color: white;
  font-size: 55px;
  height: 100%;
}

<a href="" class="btn-circle">
  <span>«</span>
</a>

SVG

Personally I use svg icons that are already perfectly centered vectors and easier to work with.

I don't recommend linking svg's to independant files. I would use them inline. This is just an example.

.btn-circle {
  width: 72px;
  height: 72px;
  border-radius: 100%;
  display: flex;
  fill:#fff;
  background: #ddd url("https://www.svgrepo.com/show/361731/chevron-double-left.svg") no-repeat center center;
  background-size: 40px;
}

<a href="" class="btn-circle"></a>

Perfect!! Thanks @DreamTeK Finally it worked for me... I really liked the solution with SVG and it's the one I'm going to use... but I'm left with a doubt... if I had to leave it with the symbol... how should I calculate line -height... I also see that the font size will always depend on a specific value of line-height. — , Feb 22 '22 at 13:34
and also... how can I change the color of the symbol in the SVG to white? @DreamTek — , Feb 22 '22 at 13:56
@Villalba The line-height would have to be tuned visually as it will vary depending on the font chosen and also the font size. This also means that if the user can't display the font and uses a fallback the alignment will likely be wrong. You can change the svg colour by opening the svg file in code editor and changing the `fill` hex value. I would however recommend you use **inline svg** instead of background svg image as this will mean much faster loading for the end user. — DreamTeK, Feb 23 '22 at 09:14

the text is decentered in the circular button with the increase of the font size

1 Answers1

EXAMPLE

MANUAL OFFSET

UNICODE ALTERNATIVE

SVG