Тип ввода файла вверху страницы - PullRequest
Новая
       1

Тип ввода файла вверху страницы

0 голосов
/ 14 октября 2018

Как поместить тип файла ввода в центр страницы.Который в настоящее время отображается сверху поля 

<style>
input[type="file"]
{
display: none;
}
label{
background-color: red;
padding: 25px 4px;
color: white;
cursor: pointer;
border:2px solid transparent;
}
label::selection{
background-color: yellow;
}
label:hover{
border-style: solid;
border-top-color: #92a8d1;
border-right-color: navy;
border-bottom-color: teal;
border-left-color: #1abc9c;
transition: all 2s linear;
}
</style>

1 Ответ

0 голосов
/ 14 октября 2018 

#input_file {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 400px;
}
input[type="file"]
{
  display: none;
}
label{
  background-color: red;
  padding: 25px 4px;
  color: white;
  cursor: pointer;
  border:2px solid transparent;
  margin: 0 auto;
}
label::selection{
  background-color: yellow;
}
label:hover{
  border-style: solid;
  border-top-color: #92a8d1;
  border-right-color: navy;
  border-bottom-color: teal;
  border-left-color: #1abc9c;
  transition: all 2s linear;
}
<html>
  <body>
    <div id="input_file">
      <label for="file">Input file</label>
      <input type="file" id="file"/>
    </div>
  </body>
</html>

Вы можете добавить родительский div с помощью display: flex; и использовать свойства flex, такие как justify-content: center; для вертикального центра и align-items: center; для горизонтального центра.

Также, чтобы justify-content работал, вам нужно определить высоту родительского элемента.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...