Как центрировать атрибут является абсолютной?
У меня есть демо- приложение. Откройте приложение и нажмите кнопку "Добавить", чтобы добавить строку таблицы. Вы увидите 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>
Ваша position: absolute
установка ширины для автоматического элемента и удаление ее из нормального положения. Я бы рекомендовал отказаться от позиционирования и позволить ему нормально работать. Это центрирует изображение в поле, но вы сразу заметите открытые пробелы. Мы сбросили позиционирование и вернули элемент обратно в поток, и, таким образом, другие элементы уважают его пространство, так как вы используете visibility
. Переверните использование visibility: hidden
для display: none
и элемент больше не будет занимать пространство до тех пор, пока отображаемое значение не будет переключено.
Связанные вопросы
Похожие вопросы
Посмотрите другие вопросы по меткам html css или Задайте вопрос