如何实现Label内文本居中及Label整体可点击

Hey，我来帮你搞定这两个自定义文件上传按钮的问题，咱们一步步来解决：

首先得提个小细节：你HTML里有两个<input>用了同一个id="texture-upload"，id必须是唯一的，这会导致你的label只能关联到第一个input，所以先把它们改成不同的id，比如texture-upload-1和texture-upload-2，对应的label也要更新for属性哦。

1. 让Label内的文本完全居中 #

你已经用了Bootstrap的text-center实现水平居中，现在差的是垂直居中。问题出在你的custom-file-upload类没设置垂直方向的内边距，<p>标签的pt-2只有上内边距，导致文本在垂直方向没对齐。

修改你的CSS，给custom-file-upload添加上下内边距，同时调整<p>标签的默认边距：

.custom-file-upload {
  background-color: rgb(99, 99, 99);
  border-radius: 15px;
  border: 1px solid #ccc;
  margin: 6px 180px;
  cursor: pointer;
  /* 添加上下内边距，保证文本垂直居中 */
  padding: 0.75rem 1rem;
  /* 让label成为块级元素，确保宽度和内边距生效 */
  display: block;
}

然后更新HTML里的<p>标签，去掉pt-2并添加上mb-0来消除默认下边距：

<p class="text-white text-center mb-0">Select texture folder</p>

这样文本就能在label里水平+垂直完全居中啦。

2. 让Label整个区域都能触发点击 #

现在只有上半部分能点击，是因为你的custom-file-upload没有足够的内边撑出完整的点击区域，再加上原始结构里input和label的对应关系不对，导致点击范围受限。

除了上面给custom-file-upload加padding和display: block之外，还要确保每个input对应一个独立的label，并且label的盒模型覆盖整个按钮区域。另外你隐藏input的写法是对的，只要保证label和input的id/for对应上就没问题。

给你修正后的完整代码参考：

调整后的CSS #

.container { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  padding: 1rem 0; /* 给容器添加上下内边距，避免按钮贴底 */
}

/* 统一给隐藏的input加类名，样式更简洁 */
.file-input { 
  width: 0.1px; 
  height: 0.1px; 
  opacity: 0; 
  overflow: hidden; 
  position: absolute; 
  z-index: -1; 
}

.custom-file-upload {
  background-color: rgb(99, 99, 99);
  border-radius: 15px;
  border: 1px solid #ccc;
  margin: 6px 180px;
  cursor: pointer;
  padding: 0.75rem 1rem;
  display: block;
  /* 确保label能正常接收点击事件 */
  pointer-events: auto;
}

/* 可选：加个hover效果，提升交互感 */
.custom-file-upload:hover {
  background-color: rgb(119, 119, 119);
}

调整后的HTML #

<div class="fixed-bottom bg-secondary container" style="border-radius: 25px 25px 0px 0px;">
  <!-- 第一个文件上传组件 -->
  <input id="texture-upload-1" type="file" class="file-input">
  <label for="texture-upload-1" class="custom-file-upload">
    <p class="text-white text-center mb-0">Select texture folder 1</p>
  </label>

  <!-- 第二个文件上传组件 -->
  <input id="texture-upload-2" type="file" class="file-input">
  <label for="texture-upload-2" class="custom-file-upload">
    <p class="text-white text-center mb-0">Select texture folder 2</p>
  </label>

  <!-- 移除fixed-bottom，避免和容器重叠，用d-block让它独占一行 -->
  <a class="text-secondary text-center pb-2 d-block">Made with ❤️ by Maloni</a>
</div>

这样调整之后，你就能实现：

• Label内的文本水平垂直完全居中
• 点击Label的任何区域都能触发文件选择弹窗
• 按钮位置不会错位，完美适配你的布局

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