在圆圈中设置文字样式 [英] Styling text within a circle

问题描述

我正在画一个圆圈内的客户姓名缩写，但是字体并不总是正确居中-就像下图中的 EW 一样.

I'm styling customer initials within a circle, but the font is not always properly centered - as in the case with EW in the below image.

在此代码段中，我将使用 border-radius 向客户显示姓名的首字母作为圆圈；如果有照片，我会把照片叠起来(一种临时解决方案).

In this snippet, I'm displaying the customer initials using border-radius to give me the circle; and if a photo exists, I just overlay that photo (kind of a temp solution).

但是，字体并不总是允许我将首字母正确地放置在圆圈内.

The font doesn't always allow me to properly center the initials within the circle, however.

<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>

推荐答案

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

If it were me, for starters, get all those inline styles out of there amigo...just because.

第二，摆脱跨度的边距，并将 justify-content 应用于父对象(因为无论如何您都已在使用flex).

Second, get rid of your margins on your span and apply justify-content to your parent (since you're already using flex anyway).

第三，出于多种原因，将 img 标记作为一个元素从那里获取，然后将其合并到您的 [ngStyle] 声明中，以将其用作 background-image 以获得更整洁的DOM，以及总体上看起来更好的图标...

Third, get that img tag out of there as an element for multiple reasons and incorporate it instead into your [ngStyle] declaration to apply it as background-image for a cleaner DOM, and better looking icons overall...

因此，就像在我的示例中一样，将 background-color 移回去并执行；

So like from my example move the background-color back and do;

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

如果失败，它将仅显示 background-color

If it fails, it will just show the background-color

下面的概念证明，欢呼；

Proof of concept below, cheers;

.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>

这篇关于在圆圈中设置文字样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！