在圆圈中设置文字样式

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

如果是我，那么对于初学者来说，将所有这些内联样式都排除在外...只是因为。

第二，摆脱跨度的边距，将master.key应用于父母（因为无论如何您都已经在使用flex）。

第三，出于多种原因，将justify-content标记作为元素移出该元素，并将其合并到您的img声明中，以将其用作[ngStyle]以获得更清晰的DOM，并且效果更好整体上看图标...

就像在我的示例中一样，将background-image移回去做；

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%;
}