CSS 效果圆形里一个文字居中

Lan.W

已于 2023-10-20 16:07:11 修改

阅读量1k

点赞数

文章标签： css 前端 css3 css案例

于 2023-10-20 16:06:29 首次发布

本文链接：https://blog.youkuaiyun.com/LlanyW/article/details/133948565

版权

该篇文章展示了如何使用HTML和CSS创建一个45x45像素的圆形元素，通过设置边框半径和flex布局实现内容居中，文本颜色为白色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果实现源码：

宽度，高度必须确认，且相等

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .circlew {
      width: 45px;
      height: 45px;
      border-radius: 50%; /* 将容器设置为圆形 */
      background-color: #ff9900;
      display: flex;
      justify-content: center; /* 居中显示 */
      align-items: center; /* 居中显示 */
    }
    .txt {
      color: #ffffff;
      font-size: 26rpx;
    }
  </style>
</head>
<body>
<div class="circlew"><span class="txt">租</span></div>
</body>
</html>

效果