即使在移动设备中，我怎么也可以将文本保留在中间？

Question

我正在尝试制作一个简单的表单来询问登录详细信息，但我希望它也对移动设备友好。 它适用于台式机，但在移动设备上它向右移动了一点。 我希望文字恰好在中间，例如在PC上。 该网站在移动设备上的图片：

这是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 个解决方案

解决方案1
2 已采纳 2018-02-27 21:10:52

解决方案2
1 2018-02-27 21:08:39

解决方案3
1 2018-02-27 21:15:06

即使在移动设备中，我怎么也可以将文本保留在中间？

问题描述

3 个解决方案

解决方案1 2 已采纳 2018-02-27 21:10:52

解决方案2 1 2018-02-27 21:08:39

解决方案3 1 2018-02-27 21:15:06

解决方案1
2 已采纳 2018-02-27 21:10:52

解决方案2
1 2018-02-27 21:08:39

解决方案3
1 2018-02-27 21:15:06