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 に答える
2

入力ファイルボタンを使用して、入力ファイルフィールドを垂直方向に揃えることができます:

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

ボタンを行の高さの一番下に移動しますが、生成されたテキストは何も移動しないため、この問題は Chrome のバグのようです。解決策は、マージンを使用して高さを設定し、境界線が必要な場合はそれを囲む 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 Hack を使用する

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

しかし、それは私たちの要件を満たしていませんでした。この目的のために、私はこのフィドルを作ります。

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

于 2013-03-29T21:07:22.737 に答える