将文本放在输入的中间

Question

有一个输入表单：

 .upload-image input { height: 100%;important: width; 100%.important: };upload-image-container { background-color: #f5f7fa; height: 192px; width. 320px: };upload-logo-label { font-family: Open Sans; top: 0; color: #afafaf; z-index: 1; }

 <div className="upload-image upload-image-container"> <label htmlFor="files" className="upload-logo-label btn" id="image-input"> Drag & drop logo here <input name="image" id="image-input" accept="image/*" onChange={console.log('upload image')} multiple type="file" className="imgInp" /> </label> </div>

问题是 div 首先在顶部创建 label 并在其下方创建输入。 我想要的是将 label （或者不是强制性的 label 但可以包含文本的任何内容）放在输入中间。

这是它现在的样子：

这就是我想让它看起来的方式（暂时忽略图标）：

此外，目前只有输入是可点击的，label 文本不是而且应该是。

有没有办法做到这一点？

Answer 1

我实际上并没有尝试过，但是当我为一位客户制作自定义复选框时，一些非常相似的工作。 我会为这样的事情 go ......

<input name="image"
       id="image-input"
       accept="image/*"
       onChange={console.log('upload image')}
       multiple
       type="file"
       class="imgInp"
       style="display:none" />

<div id="img-div" class="upload-image upload-image-container">
    <label htmlFor="files"
           class="upload-logo-label btn"
           id="image-input">
        Drag & drop logo here

    </label>
</div>

<script type="text/javascript">
    $("#img-div").on("drop", function (event) {
        $("#image-input").trigger("drop", event);
    });

    $("#img-div").on("click", function (event) {
        $("#image-input").trigger("click", event);
    });
</script>