gpt4 book ai didi

内部带有动态文本的 CSS 圆圈

转载 作者:行者123 更新时间:2023-12-02 09:33:46 29 4
gpt4 key购买 nike

我需要构建一个圆形(在 css 中),它有 2 行文本,可以根据选择的翻译改变长度并始终居中。

到目前为止我有这个:

h3 {
background-color: #fcd141;
border-radius: 50%;
padding: 12px 5px 5px 5px;
margin-top: 30px;
width: 20%;
height: 20%;
}
<h3>
<span style="vertical-align: middle;">98%</span>
<span style="margin-top: -4px; display: block;">Ratingfasdasfasfsad</span>
</h3>

圆圈需要动态响应文本的长度,保持纵横比不变。

最佳答案

你可以看看代码,因为在你的代码中它看起来像一个椭圆

.circle-text {
width: 50%;
padding 10px;
}
.circle-text:after {
content: "";
display: block;
width: 100%;
height: 0;
padding-bottom: 100%;
background: #4679BD;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.circle-text div {
float: left;
width: 100%;
padding-top: 50%;
line-height: 1em;
margin-top: -0.5em;
text-align: center;
color: white;
}
<div class="circle-text">
<div>I'm asddddddssssssssssssssssssasdasdashd asfafjsldfashdfisdpf sdjf pe!</div>
</div>

关于内部带有动态文本的 CSS 圆圈,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29744004/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com