css - React-Circular-Progressbar 中的文本未居中
问题描述
当我创建一个圆形进度条时,我正在努力让文本居中。
这是添加进度条和文本的代码。
<div>
<ProgressBar
value={80}
text="80%"
strokeWidth={5}
styles={buildStyles({trailColor:"red"})}
/>
此代码是进度条的样式部分。是否可以将文本居中到进度条
const ProgressBar = styled(CircularProgressbar)`
width: 100px;
height: 100px;
`;
解决方案
我相信我们可以flex
在这里利用。
在包含文本标签的容器上。你可以加。
display: flex;
justify-content: center;
align-items: center;
只要确保文本是应用flex
我之前提到的样式的容器的直接子元素
推荐阅读
- apache - 如何使用非根上下文路径为 Apache 和 Jetty 主机设置反向代理
- spring-boot - Feign 客户端无法拨打电话 - Kubernetes
- nginx - 如何使用 ELK 堆栈监控 nginx 响应时间?
- node.js - 即使我的终端关闭,我如何让我的不和谐机器人保持在线
- javascript - 如何在javascript中找到没有内置函数的子字符串?
- angular - ionic 4如何通过单击按钮更改幻灯片
- java - 将我的普通 RecyclerView 迁移到 RecyclerView 数据绑定
- r - 将两个数据帧合并到一个匹配变量上,只为其他不相交的变量保留一个值
- android - 将数据从 recyclerview 适配器传递到片段时遇到问题
- swift - 包含声明的闭包不能与函数生成器“ViewBuilder”一起使用