2

我在这里有一个演示应用程序。请打开应用程序，然后单击“添加”问题按钮以附加表格行。您将看到 4 个表格列，其中三个列由图像文件输入、视频文件输入和音频文件输入组成。在其中一个输入中，请选择一个相关文件并上传它，您将看到一个加载栏。但问题是加载栏未显示在其表格单元格的中心。

我的问题是如何将每个文件输入的加载栏居中在其自己的表格单元格中？

以下是所有三个文件输入中用于加载栏的 css：

.imagef1_upload_process{
    position:absolute;
    visibility:hidden;
    text-align:center;
    margin-bottom:0px;
    padding-bottom:0px; 
    }

.videof1_upload_process{
    position:absolute;
    visibility:hidden;
    text-align:center;
    margin-bottom:0px;
    padding-bottom:0px; 
    }

.audiof1_upload_process{
    position:absolute;
    visibility:hidden;
    text-align:center;
    margin-bottom:0px;
    padding-bottom:0px; 
    }

以下是每个加载栏的 html：

图片加载栏：

<form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target_image' onsubmit='return imageClickHandler(this);' class='imageuploadform' > 
<p class='imagef1_upload_process'>Loading...<br/><img src='Images/loader.gif' /></p>
    </form>

视频加载栏：

<form action='videoupload.php' method='post' enctype='multipart/form-data' target='upload_target_video' onsubmit='return videoClickHandler(this);' class='videouploadform' > 
<p class='videof1_upload_process'>Loading...<br/><img src='Images/loader.gif' /></p>
</form>

音频加载栏：

<form action='audioupload.php' method='post' enctype='multipart/form-data' target='upload_target_audio' onsubmit='return audioClickHandler(this);' class='audiouploadform' > 
<p class='audiof1_upload_process'>Loading...<br/><img src='Images/loader.gif' /></p>
</form>
4

1 回答 1

0

您position: absolute正在将元素的宽度设置为 auto 并将其从正常定位中移除。我建议放弃定位并让它正常流动。这将使图像在字段中居中，但您会立即注意到开放的空白。我们已经放弃了定位并将元素放回流中，因此，其他元素尊重它的空间，因为您正在利用visibility. 翻转你的使用，visibility: hidden元素display: none将不再占用空间，直到显示值被切换。

于 2012-12-31T01:37:06.733 回答