[Solved] Center aligning a single letter inside a div

Question

It seems (at least) part of your issue is caused by the use of inline styles coupled with CSS styles.

The inline styles of height and width are hardcoded to fixed pixel values. While the CSS values don’t define a font-size, so it’s using the browser’s, or inherited, font size). And to get the desired result we need to have the height, width, line-height, and font-size match up.

I’d recommend moving all the styles to a single source – which could be either inline or CSS. I’ll go with CSS for the solution below.

I think the best solution would be to match the line-height, width and height properties to a value using em units. For example 1.7em units.

With this setup the font-size can be changed to nearly anything and the letter will be placed in the center of the element.

Here’s an example:

.av_btn {
  justify-content: center;
  align-content: center;
  display: inline-flex;
  border-radius: 50%;
  padding: 5px;
  font-size: 18px;
  line-height: 1.7em;
  width: 1.7em;
  height: 1.7em;
  background-color: white;
  font-weight: bold;
  border: 1px #1947D1 solid;
}

<div class="av_btn">
  <b>M</b>
</div>

And here’s an example showing how it scales with font size.

var size = document.getElementById("font-size");
var avatar = document.getElementById("avatar");

size.addEventListener("change", function(event) {
  var fontSize = event.target.value;
  avatar.style.fontSize = fontSize + "px";
})

.av_btn {
  justify-content: center;
  align-content: center;
  display: inline-flex;
  border-radius: 50%;
  padding: 5px;
  font-size: 18px;
  line-height: 1.7em;
  width: 1.7em;
  height: 1.7em;
  background-color: white;
  font-weight: bold;
  border: 1px #1947D1 solid;
}

<input id="font-size" type="range" min="16" max="100" value="16" /> 

<div class="av_btn" id="avatar">
  <b>M</b>
</div>

Accepted Answer