【问题标题】: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>

    【讨论】:

      猜你喜欢
      • 2016-04-26
      • 2019-03-11
      • 2014-05-20
      • 2016-07-30
      • 2021-07-04
      • 1970-01-01
      • 2017-08-15
      • 1970-01-01
      • 2016-10-09
      相关资源
      最近更新 更多