gpt4 book ai didi

html - 在样式圆圈内格式化文本

转载 作者:太空宇宙 更新时间:2023-11-04 01:47:27 25 4
gpt4 key购买 nike

谁能告诉我如何将文本置于 css 样式圆圈内,使其上下排列而不是顺序排列。

这是 jsfiddle https://jsfiddle.net/zhxysyrz/

这是代码

<title>Page Title</title>
<style>
.roundFormat {
display: inline-block;
height: 60px;
width: 60px;
line-height: 60px;
-moz-border-radius: 30px;
border-radius: 30px;
background-color: #C0C0C0;
color: white;
text-align: center;
font-size: 1em;
}
</style>

<body>
<span class='roundFormat'>7 Apr</span>

</body>
</html>

所以在圆圈内而不是按顺序排列 4 月 7 日,我怎样才能在不增加圆圈大小的情况下像下面那样堆叠它。

7
年利率

谢谢

编辑:这是我想要的格式! http://imgur.com/a/aNg33

最佳答案

您可以使用 display: table 和 disply: table-cell 垂直对齐圆圈中的文本和 br 以便文本下降到第二行。

这是一个解决方案 https://codepen.io/anon/pen/aWxbmx

HTML

<div class='roundFormat'>
<div class='roundFormatWrap'>7<br>apr</div>
</div>

CSS

.roundFormat {
display: inline-block;
height: 60px;
width: 60px;
-moz-border-radius: 30px;
border-radius: 30px;
background-color: #C0C0C0;
color: white;
text-align: center;
font-size: 1em;
display: table;
}

.roundFormatWrap {
display: table-cell;
vertical-align: middle;
line-height: 14px;
}

关于html - 在样式圆圈内格式化文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44191343/

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