代码之家 › 专栏 › 技术社区 › bob.mazzo

设置圆内文本的样式

css3 angular angularjs css

bob.mazzo · 技术社区 · 6 年前

我在一个圆圈内设计客户姓名首字母的样式,但字体并不总是正确居中-例如 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>

1 回复 | 直到 6 年前

Chris W. 6 年前

如果是我,首先,把所有的内联样式从那里拿出来,朋友…只是因为。

第二,在你的跨度上去掉你的利润,然后申请 justify-content 给你的父母(因为你已经在使用flex了)。

第三,明白吗 img 出于多种原因将其标记为元素,并将其合并到您的应用程序中 [ngStyle] background-image 为了更干净的DOM和更好看的图标。。。

background-color 回来做;

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

如果失败了,它只会显示

下面是概念证明,干杯;

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

推荐文章

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

4 月前

user3472810 · Angular@Output/EventEmitter返回undefined

4 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

4 月前

Jihed Ben Zarb · 造型角材料日期选择器

5 月前

st_clair_clarke · 为angular v19资源API创建可重复使用的加载器,其中包含2个不同类型的请求参数

5 月前

Ajay Kulkarni · Angular 19-重新路由到子路由未按预期工作

5 月前

Ajay Kulkarni · 路由器与导航上的路线不匹配

5 月前

Jace Johnson · Typescript文件读取的变量类型错误

6 月前

Ole · Angular资源API是否支持为资源添加初始值?

6 月前

Ole · 在使用新的Angular Resource API时取消搜索术语?

6 月前