中心文件输入 - Html/Css答案

【问题标题】：Center File Input - Html/Css中心文件输入 - Html/Css
【发布时间】：2020-07-02 18:00:12
【问题描述】：

伙计们，我正在使用 HTML、Javascript 和 CSS 构建一个网站，我有一个文件输入，但由于某种原因它不会完全居中。

body {
  width: 100%;
  height: 100%;
  margin: auto;
  text-align: center;
}
#inp {
  text-align: center;
  margin: auto;
}

<input id="inp" type="file" accept="image/*">

【问题讨论】：

从这部分代码我们不能说如果你有更多的东西可能会打断它，但在你的示例代码中你应该把样式放在 head 部分或者至少在这个输入之前
工作很好有什么问题？？
给#inp 设置宽度，比如 174px
看到这个 jsfiddle：jsfiddle.net/49agf4h5
我认为问题在于输入的宽度。如果您选择它，并看到蓝色突出显示，它表明它比文本和按钮更宽。

标签： javascript html css

【解决方案1】：

它工作正常，我们可以得到整个代码吗？

body {
  width: 100%;
  height: 100%;
  margin: auto;
  text-align: center;
}

#inp {
  text-align: center;
  margin: auto;
}

<body>
  <input id="inp" type="file" accept="image/*">
</body>

【讨论】：

这看起来仍然没有完全居中。
把text-align: center;改成text-align-last: center;会更居中。

【解决方案2】：

适用于最新浏览器的 CSS 解决方案

更多浏览器支持详情：http://caniuse.com/#search=vw

CSS3 引入了利用可见屏幕尺寸的vw, vh 单位。下面是一个示例，展示了如何使用这些值将 div 的 width 和 height 属性设置为 100vw（表示屏幕可见宽度的 100%）和 100vh（表示 100%屏幕的可见高度）：

body {
  margin : 0px;
}

.fullscreen {
  width : 100vw;
  height : 100vh;
}

.table-cell {
  display : table-cell;
  background : lightgrey;
}

.valign-middle {
  vertical-align : middle;
}

.text-center {
  text-align : center;
}

<div class="fullscreen table-cell valign-middle text-center">
  <input type="file" />
</div>

【讨论】：

这看起来仍然没有完全居中。

【解决方案3】：

不确定你是否想实现这个，但看看这个 Fiddle

   #inp {
     text-align: center;
     margin: auto;
     position: absolute;
     top: 50%; 
  }

【讨论】：

【解决方案4】：

您可以通过将输入文件括在

中来居中

标签，然后添加 CSS。

【讨论】：