如何将上传按钮放置在块的中心答案

【问题标题】：How to position Upload button at the center of the block如何将上传按钮放置在块的中心
【发布时间】：2022-02-14 22:08:37
【问题描述】：

网站现状

我想确保选择文件按钮应位于上传图片的位置。我是 HTML 和 CSS 新手。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Health Buddy</title>
    <link rel= "stylesheet" href="My_css.css">
</head>
<body>
    <div class="TOP">HEALTH BUDDY</div>
    <div class="class">Upload Image</div>
    <form action="/action_page.php">
        <input type="file" id="myFile" name="filename">
        <input type="submit">
    </form>
</body>
</html>

【问题讨论】：

请为“上传图片”div 添加 CSS。

标签： html css

【解决方案1】：

您可以将“选择文件按钮”放在“上传图片” div 中。然后你可以position他们来实现你想要的。试试这个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Health Buddy</title>
    <link rel= "stylesheet" href="My_css.css">
    <style type="text/css">
        .class {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #myFile {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            opacity: 0;
            z-index: 1;
        }
    </style>
</head>
<body>
    <div class="TOP">HEALTH BUDDY</div>
    <form action="/action_page.php">
        <div class="class">
            Upload Image
            <input type="file" id="myFile" name="filename">
        </div>
        <input type="submit">
    </form>
</body>
</html>

【讨论】：

【解决方案2】：

将适当的 css 属性添加到具有输入元素的类 fullscreen table-cell valign-middle text-center。

body {
  margin : 0px;
}

.fullscreen {
  width : 100vw;
  height : 100vh;
}

.table-cell {
  display : table-cell;
  border: 1px solid red;
  position: relative;
  width : 200px;
  height :200px;
  display:flex;
  align-items: center;
  }

.valign-middle {
  vertical-align : middle;
}

.text-center {
  text-align : center;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Health Buddy</title>
    <link rel= "stylesheet" href="My_css.css">
</head>
<body>
    <div class="TOP">HEALTH BUDDY</div>
    <div class="fullscreen table-cell valign-middle text-center">
    <input type="file" id="myFile" name="filename"></div>
    <form action="/action_page.php">
        <input type="submit">
    </form>
</body>
</html>

【讨论】：