Стилизация текста внутри круга

Question

Я оформляю инициалы клиентов внутри круга, но шрифт не всегда правильно отцентрирован - как в случае с EW на изображении ниже.

В этом фрагменте я отображаюинициалы клиента, используя border-radius, чтобы дать мне круг;и если фотография существует, я просто накладываю эту фотографию (что-то вроде временного решения).

Однако шрифт не всегда позволяет мне правильно центрировать инициалы внутри круга.

<i [ngStyle]="{'background-color': dataItem.backgroundColor}" 
	style= "display: inline-flex; 
			align-items: center;
			height: 25px; 
			width: 25px;
			border-radius: 50%;
			border: white; 
			border-style: solid; 
			border-width: 1px;" >


	<span style="margin: 5px 0 0 4px; color: #000;font: 12px Arial;">
		{{ dataItem.custInitials }}
	</span>
	<img src="{{ './assets/profiles/customers/' + dataItem.UID + '.jpg' }}" 		
		onerror="this.style.display='none'; this.className='' "
		(error)="noImage=true"
		height="25" width="25" style="border-radius:30px; margin: -1px 0 0 -23px;" />
</i>

Answer 1

Если бы это был я, для начала, вытащите все эти встроенные стили от amigo ... просто потому, что.

Во-вторых, избавьтесь от своих полей на вашем промежутке и примените justify-content к вашему родителю.(поскольку в любом случае вы уже используете flex).

В-третьих, выньте этот тег img как элемент по нескольким причинам и включите его вместо этого в декларацию [ngStyle], чтобы применить его как background-image для более чистого DOM и лучше выглядящих значков в целом ...

Так что, как в моем примере, переместите background-color назад и сделайте;

[ngStyle]="{'background-color': dataItem.backgroundColor, 
            'background-image': 'url(./assets/profiles/customers/' + dataItem.UID + '.jpg)'}"

Если произойдет сбой, он просто покажет background-color

Доказательство концепции ниже, ура;

.profile-dot {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  width: 3rem;
  background-color: lightgray;
  border-radius: 50%;
  border: gray 2px solid;
  background-size: cover;
  background-position: center;
  background-repeat: none;
}

.profile-dot span {
  font-weight: 700;
  color: #fff;
  font-style: normal;
  font-size: 120%;
}

<i class="profile-dot" style="background-image: url(https://i.stack.imgur.com/BVW9D.jpg)">
  <span>CW</span>
</i>