中心文件输入- Html/Css

Center File Input - Html/Css

本文关键字：Html Css 输入 文件      更新时间：2023-09-26

伙计们，我正在用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/*">

它工作得很好，我们能得到完整的代码吗?

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>

最新浏览器的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>

不确定您是否想要实现这一点，但看看这个小提琴

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

您可以将输入文件置于

标记中，然后为其添加CSS。

相关文章：