Question

如何将输入类型文件放在页面中心。当前显示在页边空白处

<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>

Answer 1

#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;中，并使用诸如justify-content: center;的flex属性作为垂直居中，而将align-items: center;用作水平居中。

此外，为了使justify-content有效，您需要定义父级的高度。

输入类型文件页面顶部

1 个答案: