在圆圈中设置文字样式

本文介绍了在圆圈中设置文字样式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在画一个圆圈内的客户姓名缩写，但是字体并不总是正确居中-就像下图中的 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(i.stack.imgur/BVW9D.jpg)"> <span>CW</span> </i>