英文:
How to create a circle around text using css?
问题
我目前正在努力找到一个特别适合我要寻找的示例。我正在尝试使用CSS在文本周围创建一个圆。我找到了将文本放在圆内的示例，但在这种情况下，我试图创建一个围绕文本的圆。
我要创建的示例：
英文:
I'm currently having trouble finding an example for what i'm specially looking for. I am trying to create a circle around my text using CSS. I've found examples of a circle with the text inside, but in this instance i'm trying to create a circle surrounding the text.
An example of what i'm trying to create:
答案1
得分: 1
尝试使用 border-radius: 50% 将任何块元素，比如 div，的高度和宽度设置成相等，从而变成一个圆形。
.circle {
height: 2em; /* 仅为示例大小 */
width: 2em;
border: 4px solid #f00;
border-radius: 50%;
}
要将文本居中在圆形内，你可以在元素上使用 flexbox 属性，尽管这不是唯一的实现方式。
.circle {
height: 2em;
width: 2em;
border: 4px solid #f00;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
英文:
Try using border-radius: 50% to turn any block element like a div with an equal height and width into a circle.
.circle {
height: 2em; /* just an example size */
width: 2em;
border: 4px solid #f00;
border-radius: 50%;
}
To center the text within the circle, you may want to use flexbox properties on the element as well, though this is not the only way you could achieve that.
.circle {
height: 2em;
width: 2em;
border: 4px solid #f00;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论