中心文件输入 - Html/Css

问题描述 投票：0回答：4

我正在使用 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/*">
javascript html css
4个回答
4
投票

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

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>

1
投票

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

0
投票

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

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

您可以将输入文件放在

标签中，然后向其中添加 CSS，从而将其居中。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.