如何通过CSS将HTML按钮内的文本分别定位到四个角落

要将四个方位文本分别固定在按钮的左上、右上、左下、右下角落，核心是用相对定位+绝对定位的组合实现，原来把所有文本放在同一个div里的写法无法单独控制每个文本的位置，按下面的代码调整即可：

核心改动点 #

• 给按钮和内部容器设置相对定位，作为方位文本的定位参照
• 把四个文本拆分为独立的行内元素，分别设置绝对定位固定到对应角落
• 移除按钮原本的居中对齐、多余内边距，避免定位偏移，添加盒模型属性防止按钮尺寸被内边距撑大

完整可运行代码 #

CSS部分 #

.new {
  color: black;
  width: 100%;
  height: 100%;
  position: relative;
}

.act_button {
  height: 20vh;
  width: 20vh;
  background-color: #ADD8E6;
  border: none;
  color: white;
  padding: 8px;
  text-decoration: none;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  position: relative;
  box-sizing: border-box;
}

.corner-label {
  position: absolute;
}
.top-left {
  top: 8px;
  left: 8px;
}
.top-right {
  top: 8px;
  right: 8px;
}
.bottom-left {
  bottom: 8px;
  left: 8px;
}
.bottom-right {
  bottom: 8px;
  right: 8px;
}

HTML部分 #

<button class="btn btn-default action-button act_button" id="show" type="button">
  <div class="new">
    <span class="corner-label top-left">Top-left</span>
    <span class="corner-label top-right">Top Right</span>
    <span class="corner-label bottom-left">Bottom left</span>
    <span class="corner-label bottom-right">Bottom right</span>
  </div>
</button>

参数调整说明 #

• 四个角文本的top/left/right/bottom数值和按钮的padding值保持一致即可，数值越大文本离按钮边缘越远，可按需调整
• 如果不需要留边距，把对应数值改成0，文本就会完全贴在角落位置

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