如何将输入类型文件放在页面中心。当前显示在页边距的顶部
<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>
最佳答案
#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>您可以使用
display: flex;添加父div，并使用诸如justify-content: center;的flex属性用于垂直居中，使用align-items: center;的flex属性用于水平居中。同样，为了使
justify-content起作用，您需要定义父级的高度。关于css - 输入类型文件页面顶部，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52799228/