HTML 文件输入未居中答案

【问题标题】：HTML File Input not centeringHTML 文件输入未居中
【发布时间】：2021-07-05 16:04:22
【问题描述】：

我正在尝试用 HTML/Tailwind CSS/ReactJS 构建一个表单。我已经很好地创建/样式化了表单，但我似乎遇到了文件输入未正确居中的问题。该元素似乎有一些固有的宽度，但它不会在该空间内居中。

我已经创建了一个 CodePen 来尝试解决这个问题： https://codepen.io/developerryan/pen/mdREJXo

或者您可以在此处查看此部分：

<body>
  <div class="w-screen h-screen flex flex-col items-center justify-center">
    <form class="w-full flex flex-col items-center">
      <label class="block text-lg">Model</label>
      <input type="file" id="model" name="model" accept=".pt, .pth" multiple class="border"/>

      <label class="block text-lg mt-4">Handler</label>
      <select name="handler" id="handler" class="rounded border border-gray-400 p-1">
        <option value="">-- Please select a handler --</option>
        <option value="image_classifier">
          Image classifier
        </option>
        <option value="image_segmenter">Image segmenter</option>
        <option value="object_detector">Object detector</option>
        <option value="text_classifier">Text classifier</option>
        <option value="custom">Custom</option>
      </select>
      <div class="flex items-center justify-center font-semibold bg-blue-700 text-white rounded w-6/12 max-w-xs min-w-min my-4 h-10 hover:bg-blue-800 cursor-pointer">
        Upload
      </div>
    </form>
  </div>
</body>

我尝试了各种不同的解决方案，例如列出的here 和here，但这些似乎都没有对我的表单进行任何更改。

我想要居中的特定元素是文件输入，如下所示： .

虽然实际元素在父容器中居中，但它看起来并不居中，因为它不在自己的宽度/容器中居中。

【问题讨论】：

具体是什么没有居中？你能再澄清一些吗？
你指的是选择不居中吗？它实际上是居中的，但在视觉上可能看起来不是
我继续对问题进行了一些编辑。具体来说，我希望文件输入在边界内居中。 @dthree
您的意思是要“未选择文件”居中在边界区域内吗？
与关联按钮一样，最好是@NeilMorgan

标签： javascript html css tailwind-css

【解决方案1】：

在这种情况下，出于安全原因，通常会限制编辑输入值。不过，您总是可以模仿自己想要的风格。

这里的书面示例供您参考：

input[type="file"] {
    display: none;
}
.upload{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  position:relative;
  padding-right:22px;
  border: 1px solid #ccc;
  cursor: pointer;
}
.upload::before{
  content:"Choose Files";
  display:flex;
  justify-content:center;
  align-items:center;
  padding: 6px 12px;
  margin-right:22px;
  background:grey;
}

<label for="file" class="upload">
   File
</label>
<input id="file" type="file"/>

【讨论】：