标准化CSS圆形图标按钮的尺寸与居中教程

/* 整体控制器容器样式 */
.controls {
  margin-top: 3rem;
  display: flex;
  justify-content: space-between; /* 使按钮均匀分布 */
}

/* 按钮和链接元素的通用重置 */
.controls button,
.controls a {
  border: none;
  background-color: transparent;
  cursor: pointer;
  padding: 0; /* 移除默认内边距 */
  margin: 0; /* 移除默认外边距 */
  line-height: 1; /* 帮助垂直对齐 */
  display: inline-flex; /* 使其成为flex容器，便于内部i元素居中 */
  justify-content: center;
  align-items: center;
}

/* 图标元素（i）的圆形背景和居中样式 */
.controls i {
  /* 定义固定的尺寸，创建标准的圆形区域 */
  width: 50px; /* 示例宽度 */
  height: 50px; /* 必须与宽度相同以形成正圆 */

  /* 制作圆形背景 */
  border-radius: 50%;
  background-color: #48bf91;
  border: 1px solid grey;

  /* 使用Flexbox将Font Awesome图标精确居中于圆形区域内 */
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */

  /* 图标本身的样式 */
  font-size: 25px; /* 根据需要调整图标大小 */
  color: white; /* 确保图标颜色与背景对比鲜明 */
}

/* 可选：针对特定按钮的显示/隐藏 */
.controls #stop {
  display: none;
  margin-right: 15px;
  text-decoration: none;
}

.controls #reset {
  display: none;
  margin-left: 15px;
  text-decoration: none;
}

<div class="controls">
    <button id="start" onclick="start()"><i class="fa-solid fa-play"></i></button>
    <a id="stop" href="#" onclick="stop()"><i class="fa-solid fa-stop"></i></a>
    <a id="reset" href="#" onclick="reset()"><i class="fa-solid fa-arrow-rotate-left"></i></a>
</div>

<div class="controls-container"> <!-- 整体按钮组容器 -->
    <div class="circular-button">
        <button id="start" onclick="start()"><i class="fa-solid fa-play"></i></button>
    </div>
    <div class="circular-button" id="stop-button"> <!-- 添加ID便于控制显示/隐藏 -->
        <a id="stop" href="#" onclick="stop()"><i class="fa-solid fa-stop"></i></a>
    </div>
    <div class="circular-button" id="reset-button"> <!-- 添加ID便于控制显示/隐藏 -->
        <a id="reset" href="#" onclick="reset()"><i class="fa-solid fa-arrow-rotate-left"></i></a>
    </div>
</div>

/* 整体按钮组容器样式 */
.controls-container {
  margin-top: 3rem;
  display: flex;
  justify-content: space-between; /* 使按钮均匀分布 */
}

/* 单个圆形按钮容器的样式 */
.circular-button {
  width: 70px; /* 定义单个圆形按钮的总宽度 */
  height: 70px; /* 定义单个圆形按钮的总高度 */
  border-radius: 50%;
  background-color: #48bf91; /* 背景色直接给容器 */
  border: 1px solid grey;

  display: flex; /* 使用Flexbox居中内部的button/a元素 */
  justify-content: center;
  align-items: center;
}

/* 按钮和链接元素的通用重置 */
.circular-button button,
.circular-button a {
  border: none;
  background-color: transparent; /* 背景色由父容器提供 */
  cursor: pointer;
  padding: 0;
  margin: 0;
  line-height: 1;
  /* button/a 内部不再需要flex居中，因为i元素是其唯一内容 */
}

/* 图标元素（i）的样式 */
.circular-button i {
  font-size: 25px; /* 调整图标大小 */
  color: white; /* 图标颜色 */
  /* i元素不再需要设置width/height/border-radius/background-color/border，
     这些都由父级 .circular-button 负责 */
  display: flex; /* 确保图标内容本身（字形）居中，虽然Font Awesome图标通常已经居中 */
  justify-content: center;
  align-items: center;
}

/* 可选：针对特定按钮的显示/隐藏 */
#stop-button, #reset-button {
  display: none; /* 默认隐藏 */
}

/* 原始的 #stop 和 #reset 样式可以简化或移除，因为它们的显示由父容器控制 */
/* .controls #stop { display: none; margin-right: 15px; text-decoration: none; } */
/* .controls #reset { display: none; margin-left: 15px; text-decoration: none; } */