如何在HTML/CSS制作的彩色标记上方添加文字？

要在每个标记上方添加对应文字，核心是给每个标记和文字创建独立的垂直容器，通过Flex布局实现文字在上、标记在下的居中排列，同时保持整体布局的一致性。

修改后的HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Color markers</title>
  <link href="marker.css" rel="stylesheet">
</head>
<body>
  <h1>Colored Markers</h1>
  <section class="container">
    <!-- 每个标记和文字用wrapper包裹 -->
    <div class="marker-wrapper">
      <p class="marker-label">Red</p>
      <div class="marker red">
        <div class="cap"></div>
        <div class="sleeve"></div>
      </div>
    </div>
    <div class="marker-wrapper">
      <p class="marker-label">Blue</p>
      <div class="marker blue">
        <div class="cap"></div>
        <div class="sleeve"></div>
      </div>
    </div>
    <div class="marker-wrapper">
      <p class="marker-label">Green</p>
      <div class="marker green">
        <div class="cap"></div>
        <div class="sleeve"></div>
      </div>
    </div>
  </section>
</body>
</html>

修改后的CSS代码 #

h1 {
  text-align: center;
}

/* 新增：包裹标记和文字的容器，垂直居中排列 */
.marker-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px 0; /* 调整上下间距，避免文字和标记太近 */
}

/* 新增：标记文字的样式，可按需调整 */
.marker-label {
  margin: 0 0 8px 0; /* 文字和标记之间的间距 */
  font-size: 14px;
  font-weight: 500;
}

.marker {
  width: 150px;
  height: 25px;
}

.red {
  background: linear-gradient(#be2525, #E2665D, #bd562d);
  box-shadow: 4px 5px 6px 0 #ee7878;
}

.blue {
  background: linear-gradient(#1ea3ad, #5dc7e2, #137791);
  box-shadow: 4px 5px 6px 0 #78b9ee;
}

.container {
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center; /* 让所有wrapper整体居中 */
}

.cap,
.sleeve {
  display: inline-block;
}

.cap {
  width: 38px;
  height: 25px;
}

.sleeve {
  width: 73px;
  height: 25px;
  background-color: rgba(255, 255, 255, 0.6);
  border-left: 12px double rgba(0, 0, 0, 0.75);
}

.green {
  background: linear-gradient(#19ca69, #2ce68f, #37c47d);
  box-shadow: 4px 5px 6px 0 #78eebd;
}

关键调整说明 #

1. marker-wrapper容器：用flex-direction: column让文字和标记垂直排列，align-items: center确保内部元素水平居中，避免文字偏移。
2. 移除marker的margin: 12px auto：因为wrapper已经负责整体居中，marker不需要再单独设置auto margin，避免重复居中导致的布局混乱。
3. marker-label样式：设置合适的上下间距，让文字和标记之间保持舒适的距离，同时可以自定义字体样式。
4. container调整：添加flex-direction: column和align-items: center，确保所有wrapper在页面中水平居中，保持整体布局的一致性。

如果想要让标记横向排列，只需修改container的CSS：

.container {
  background-color: white;
  display: flex;
  gap: 30px; /* 标记之间的横向间距 */
  justify-content: center;
  padding: 20px 0;
}

这样就能实现文字在标记上方，且布局整齐的效果。

内容的提问来源于stack exchange，提问作者Mico