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

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

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.

CodePudding user response：

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="" >
   &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="" >
  <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="" ></a>