Как центрировать атрибут является абсолютной?

У меня есть демо- приложение. Откройте приложение и нажмите кнопку "Добавить", чтобы добавить строку таблицы. Вы увидите 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>
+2
источник поделиться
1 ответ

Ваша position: absolute установка ширины для автоматического элемента и удаление ее из нормального положения. Я бы рекомендовал отказаться от позиционирования и позволить ему нормально работать. Это центрирует изображение в поле, но вы сразу заметите открытые пробелы. Мы сбросили позиционирование и вернули элемент обратно в поток, и, таким образом, другие элементы уважают его пространство, так как вы используете visibility. Переверните использование visibility: hidden для display: none и элемент больше не будет занимать пространство до тех пор, пока отображаемое значение не будет переключено.

0
источник

Посмотрите другие вопросы по меткам или Задайте вопрос