技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

CSS实现圆圈内含有文字并居中【实例】

作者:admin    时间:2022-5-17 10:35:48    浏览:

在浏览网站时,我们经常看到使用包含文本的圆圈,这个要怎样实现呢?其实,只需要一点CSS技巧,就能实现这个效果。本文将介绍如何用CSS实现带有文本的圆圈。

 CSS实现圆圈内含有文字并居中

demodownload

实例代码

CSS

.circle {
  background: burlywood;
  border: 10px solid #000;
  color: #000;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  font: 80px Arial, sans-serif;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: flex;
}

HTML

<div class="circle">webkaka.com</div>

代码解释

我们看到,代码很简单,实现方法是作一个实心圆的div,而div里的内容便是实心圆里的文字,我们只需用CSS调整文字的位置居中即可。

这个实例涉及两个知识点,一个是如何画一个实心圆,二是如何让文字居中。

画一个实心圆

首先,实心圆的CSS很简单,如下:

background: burlywood;
width: 500px;
height: 500px;
border-radius: 50%;

关键代码是设置border-radius的属性值为50%background是设置实心圆的颜色。widthheight是实心圆的直径。

文字的定位

下面是文字的定位设置:

justify-content: center;  
align-items: center;  
text-align: center;  
display: flex;

justify-content是水平布局,与之对应的是垂直布局align-itemtext-align是水平居中,display: flex;是弹性布局,该属性可以让文字垂直居中。

至此,CSS实现文字在圆圈内就完成了。

总结

本文介绍了如何使用CSS实现文字在圆圈内并居中,通过本文的学习,我们应该了解到CSS如何作圆,以及文字的布局设置、定位等相关知识。

相关文章

标签: css  圆圈  圆圈文字  文字  实心圆  
x
x
  • 站长推荐