Question

我正在尝试制作一个简单的表单，要求提供登录详细信息，但我希望它也适合移动设备。它适用于台式机，但在移动设备上它向右移动一点点。我希望文本正好在中间，就像在电脑上一样。移动版网站的图片：

以下是HTML代码：

  <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Teretulemast</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
      </head>
      <body style="display:block; padding: 0; width: 80%; margin-left: 40%; overflow:hidden; position: relative;">
        <form>
          <h1 style="">Sisse logimine</h1><br />
          <p style="">Kasutajanimi: </p><input style="height: 25px;"type="text" name="username"/>
          <p style="">Parool: </p><input style="height: 25px;" type="password" name="password"/><br />
          <input style="" type="submit" value="Logi sisse" name="Sisesta"/>
          <input type="submit" value="Tagasi" name="back"/>
        </form>
      </body>
    </html>

Answer 1

详细了解弹性框：https://www.w3schools.com/css/css3_flexbox.asp

  <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Teretulemast</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body style="display:flex; padding: 0; width: 100%; overflow:hidden; align-items: center; justify-content: center">
    <form>
      <h1 style="">Sisse logimine</h1><br />
      <p style="">Kasutajanimi: </p><input style="height: 25px;"type="text" name="username"/>
      <p style="">Parool: </p><input style="height: 25px;" type="password" name="password"/><br />
      <input style="" type="submit" value="Logi sisse" name="Sisesta"/>
      <input type="submit" value="Tagasi" name="back"/>
    </form>
  </body>
</html>

Answer 2

一种方法是将<form>设置为display:inline-block并在其容器上设置text-align:center。这确保了表单的内容决定了它的宽度，并且它总是在页面上水平居中。

body {
  text-align: center;
}

form {
  display: inline-block;
  text-align: left;
  background-color: #EEE;
  padding: 1em;
}

h1 {
  margin: 0 0 .2em;
}

label {
  display: block;
  margin: 0 0 1em;
}

input[type="text"],
input[type="password"] {
  height: 25px;
}

<form>
  <h1>Sisse logimine</h1><br />
  <label>Kasutajanimi:<br><input type="text" name="username"></label>
  <label>Parool:<br><input type="password" name="password"></label>
  <input type="submit" value="Logi sisse" name="Sisesta">
  <input type="submit" value="Tagasi" name="back">
</form>

Answer 3

在表单上尝试这些css样式

form{
 margin-left:auto;
 margin-right: auto;
 width: 200px;
 padding:30px;
 border:1px solid grey;
 left:0;
 right:0;
}

即使在移动设备中，如何将此文本保留在中间？

3 个答案: