Question

我想知道，我如何在html代码中定位元素？我听说有一些叫做框架的东西可能会有所帮助，但我不确定它是如何工作的。基本上，我希望这个登录界面放在屏幕中间，而不是默认情况下左上角。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Login</title>
  </head>
  <body>
    <form action="login" method="post">
      <h3>Employee Login</h3>
      <b>Employee ID:</b> <br />
      <input type="text"name="employee_id" size="20"><br /><br />
      <b>Password:</b><br />
      <input type="password" name="password" size="20"><br /><br />
      <input type="submit" value="Login"><br /><br />
    </form>
  </body>
</html>

Answer 1

您可以使用样式设置样式，给它一个绝对位置，然后使用transform: translate(-50%, -50%)将其翻译成中间（按“完整页面＆＃39;查看结果”）

＆＃13;

form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

＆＃13;

<form action="login" method="post">
  <h3>Employee Login</h3>
  <b>Employee ID:</b> <br />
  <input type="text"name="employee_id" size="20"><br /><br />
  <b>Password:</b><br />
  <input type="password" name="password" size="20"><br /><br />
  <input type="submit" value="Login"><br /><br />
</form>

＆＃13;

Answer 2

您可以使用CSS在屏幕中间对齐表单

只需在html主管部分的<style>和</style>部分之间添加以下代码，

form {
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  margin: auto;
  position: absolute;
}

所以，你的最终HTML文件看起来像是

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Login</title>
  <style>
  form {
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
    position: absolute;
  }
  <style>
  </head>
  <body>
    <form action="login" method="post">
      <h3>Employee Login</h3>
      <b>Employee ID:</b> <br />
      <input type="text"name="employee_id" size="20"><br /><br />
      <b>Password:</b><br />
      <input type="password" name="password" size="20"><br /><br />
      <input type="submit" value="Login"><br /><br />
    </form>
  </body>
</html>

通过使用上面的CSS，您的表单将水平和垂直居中。

希望这会有所帮助：）

如何格式化我的html代码以在特定位置显示元素

2 个答案: