Question

我试图移动一个输入元素是一种不会逃避我创建的“popUp”（div）以包含它并使其居中的方式，但无论我做什么它都不会移动。< / p>

我不得不说它很烦人。

我准备了一个小提琴来进一步说明这一点，这也是我正在谈论的输入：

  <div class="popUp " id="popUpCorrecto1">
 <div class="estiloPopUp">
    <span>Carga Masiva</span>
    <span value="Cerrar" id="btnCerrar">x</span>
 </div>
 <p>Seleccione un archivo de tipo CSV. El archivo no debe excedar los 100KB.</p>

       <form enctype="multipart/form-data" action="uploader.php" method="post" id="uploadForm">
          <input name="csvUpload" id="upload" type="file" accept=".csv" class="left" />
       </form>

</div>

http://jsfiddle.net/WKkL5/

老实说，我差点把笔记本电脑扔出窗外，任何帮助都会非常感激。

Fiddle here

Answer 1

您不应在position:relative;和<p>元素上使用<input>来实现布局。

我建议使用默认定位（静态）和使用边距，这样元素就不会叠加。然后，您可以在表单元素上使用text-align:center;来对输入进行居中。

请参阅 FIDDLE

Answer 2

您应该利用 text-align：center; 并显示：内嵌块; 组合以进行居中对齐。您还可以使用 margin：0 auto; ，其中包含固定宽度的中心块元素。

#popUpCorrecto1 p {
    position: relative;
    margin: 40px auto 20px;
    width: 180px;
}

关于你的问题，由于输入文件格式控件取决于它所呈现的浏览器，因此总是存在使该特定元素居中的麻烦。例如，在Firefox中，你将获得更大的输入文件控制，而在IE中可能只是一点点。为避免这种情况，您可以使用css-trick，这样您就可以放置自定义按钮而不是输入文件。

请在此处查看我的解决方案：

http://jsfiddle.net/WKkL5/2/

输入的位置不会让步

2 个答案: