gpt4 book ai didi

css - 文本在菱形内垂直对齐

转载 作者:行者123 更新时间:2023-11-28 02:16:04 27 4
gpt4 key购买 nike

我已经使用以下代码成功创建了钻石

CSS:

 .diamond {
height: 75px;
width: 75px;
border-radius:15px;
transform: rotate(45deg);
float: left;
margin-left: 18%;
font-size:50px;
color: white;
font-family:Adequate-ExtraLight;
}
    <div class="diamond" style="background-color:#ff4d4d">48</div>

以上代码产生的输出有倾斜的文本,但我想水平制作文字。我试过但失败了。谁能告诉我如何实现这一目标。

最佳答案

<div class="diamond" style="background-color:#ff4d4d">
<div class="text-inside-diamond">48</div>
</div>

.text-inside-diamond {
transform: rotate(-45deg);
margin-left: 10%;
}

内部类的margin-left只是为了让div居中您的钻石级别保持不变。

关于css - 文本在菱形内垂直对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48474353/

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