Question

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

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

HTML

<input type="file">

CSS

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

是否有一些我不知道的属性或者这是不可能的？

提前致谢，理查德

Answer 1

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

这对我有用，Chrome 29.0.1547.57

Answer 2

另一个解决方案的工作原理很简单，因为行高足够小，因此使用行高为0会更有意义。

这仍然具有非零高度，它只是删除＆＃34;填充＆＃34; - 对我来说，默认情况下，文件输入的边距和填充为input[type="file"] { line-height: 0; }。

{{1}}

Answer 3

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

HTML

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

CSS

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

input {
  margin: 10px 0;
}

在this fiddle

中实施

Answer 4

这是一个浏览器问题。点击此处查看解决方法：http://www.quirksmode.org/dom/inputfile.html

Answer 5

使用Chrome Hack

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

但它不符合您的要求。所以为了这个目的，我做了这个小提琴。

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

Answer 6

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

input[type="file"]::-webkit-file-upload-button {
  vertical-align: middle;
  height: 100%;
}

如何在Chrome中的文件输入上垂直对齐文件名

6 个答案:

HTML

CSS