Question

我在这里有一个演示application。请打开该应用程序，然后单击“添加”问题按钮以附加表格行。您将看到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>

Answer 1

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

如何将属性居中是位置绝对的？

1 个答案: