12

我们网站上有一个文件输入，它没有演示中的那么高（见下文；我夸大了它以更好地显示问题）但我们无法让文件名垂直居中 - 只有按钮垂直居中。这通常不是问题，因为我们通常坚持使用默认样式，但在这种情况下，客户端希望在此输入上设置边框，以便右边框与其下方的一些右对齐按钮对齐。在我们的例子中，高度是 23px（与 line-height 相同）。

请参考http://jsfiddle.net/UK72P/进行演示。据我所知，这只发生在 Chrome 和可能的 IE9 / 8 中（很快就会确认）。jsfiddle中的代码是：

HTML

<input type="file">​

CSS

input {
    display: inline-block;
    height: 40px;
    line-height: 40px;
    border: 1px solid #999;
}

​</p>

是否有一些我不知道的财产，或者这是不可能的？

在此先感谢，理查德

4

5 回答 5

13 
input[type="file"] {
  line-height: 10px;
}

这对我有用，Chrome 29.0.1547.57

于 2013-08-28T21:06:51.103 回答
3

另一个解决方案的工作原理仅仅是因为 line-height 足够小，所以使用 line-height 为 0 会更有意义。

这仍然有一个非零高度，它只是删除了“填充”——对我来说，文件输入的边距和填充是0默认的。

input[type="file"] {
  line-height: 0;
}
于 2016-12-21T22:03:38.570 回答
2

您可以使用输入文件按钮垂直对齐输入文件字段：

input[type="file"]::-webkit-file-upload-button {
  vertical-align: middle;
  height: 100%;
}
于 2016-09-12T15:02:28.413 回答
1

这个问题似乎是 Chrome 中的一个错误，因为它将按钮移动到 line-height 的底部，但不会移动任何生成的文本。解决方案是使用边距设置高度，如果需要边框，则使用封闭的 div。

HTML

<div class="file-border">
  <input type=file>
</div>

CSS

.file-border {
  border: 1px solid #999;
}

input {
  margin: 10px 0;
}

在这个小提琴中实现

于 2013-05-09T16:19:48.497 回答
1

使用 Chrome 黑客

input{-bracket-:hack[;line-height:50px;];}

但它并没有满足我们的要求。所以为了这个目的，我做了这个小提琴。

http://jsfiddle.net/hassaan39/hTezL/3/

于 2013-03-29T21:07:22.737 回答